HTML Tablo (HTML Tables)
Bu yazımızda HTML tablo nedir, HTML belgelerinde tablolar nasıl oluşturulur, hangi bilgiler tablolara uyar ve tablolarda karmaşık veriler nasıl temsil edilir gibi soruların cevapları irdelencektir.
HTML Tablo Nedir?
HTML ile bir tablo oluştururken tıpkı Excel’deki gibi satırlar ve sütunlardan oluşan aşağıdaki gibi bir ızgara hayal etmeniz gerekir:
| Ad | Soyad | Meslek |
| Brad | Pitt | Aktör |
| Warren | Buffett | İş adamı |
| Lionel | Messi | Futbolcu |
| Michael | Jordan | Basketbolcu |
HTML ile Tablo Oluşturmak
Tıpkı yukarıdaki tablo gibi HTML etiketleri kullanarak benzer bir tablo oluşturulabilir. HTML ile tablo oluşturmak için aşağıdaki 4 temel etiketi kullanılır:
<table><tr><td><th>
⭐ <table> etiketi ile tablo oluşturulur.
⭐ table row kelimelerinin kısaltılması olan <tr> etiketi ile tablonun satırları oluşturulur.
⭐ table data kelimelerinin kısaltılması olan <td> etiketi ile tablo içindeki hücreler oluşturulur. Adından anlaşılacağı üzere tablo içinde veri yerleştirilecek alanlardır. Haliyle metin, resim, liste, diğer tablolar vb. her türlü HTML elementini içerebilirler
⭐ table head kelimelerinin kısaltmasından oluşan <th> etiketi ile tablo içindeki başlık alanları oluşturulur. Varsayılan olarak, <th> elementindeki metin kalın ve ortalı olarak hizalanmıştır. Ancak dilerseniz bunu CSS ile değiştirebilirsiniz.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Tabloya Kenar Çizgisi Eklemek
Yukarıdaki örnekte de fark edileceği üzere varsayılan olarak tablolar kenar çizgisiz bir şekilde olşuturulmaktadır. Tabloya çerçeveli bir görünüm kazandırmak için CSS border özelliğinden faydalanırız.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Ancak bu kez de kenar çizgileri istenilen görüntüden uzak olmuştur. Zira bir tabloya kenarlık eklendiğinde her bir tablo hücresinin çevresine de kenarlıklar eklendiği için çirkin bir yapı ortaya çıkmıştır.
Bu durumu önlemek adına yine CSS kullanırız. CSS border-collapse özelliği ile bu çirkin görüntü önlenir:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Hücrelere İç Boşluk Eklemek (Padding)
Hücreler içindeki verilerin hücreden belli bir mesafede olmasını isteyebiliriz. Bunu sağlamak için yine bir CSS özelliği olan padding kullanırız:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Başlıkları Sola ya da Sağa Yaslamak
<th> etiketi içindeki metinler varsayılan olarakortalanmış gelir. Yine CSS kullanarak bunu değiştirebiliriz. Bunun için CSS text-align özelliğini kullanmamız gerekir:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Hücre Birleştirme
Yukarıdaki örneklerde fark edeceğiniz üzere bütün hücreler ayrı ayrı gösterilmiştir. Pekala bu hücreleri birleştirmek isteyebilirsiniz. Bunu yapmak için colspan özniteliği kullanılır:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Satır Birleştirme
Yukarıdaki işlemi satırlar üzerinde uygulamak için rowspan özniteliği kullanılır:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Tabloya Başlık Eklemek
Tabloya bir isim vermek isteyebilirsiniz. Bunu yapabilmek için <caption> etiketinden yararlanılır:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
