HTML'de Tablolar

Tablolar, satır ve sütunlardan oluşur. Ayrıca tablonun header'ı yani başlıklarının olduğu kısım, içerik kısmı ve footer dediğimiz alt kısmı bulunur. Tabi bunların HTML'de her birisinin etiket karşılığı vardır. Şimdi hızlıca bir örnek inceleyelim;

<table border="1" width="100%">
    <tbody>
        <tr>
            <td>Tayfun Erbilen</td>
            <td>26</td>
        </tr>
        <tr>
            <td>Ahmet Aslan</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

Şimdi tahmin edebileceğiniz üzere <table> etiketi burada tabloyu temsil ediyor bu arada border="1" tablonun çizgilerini belirlemek için kullanılıyor. Bunu daha sonra CSS'le yapacağız ancak şimdilik örnekleri görebilmek adına çerçeveyi 1 yaparak görebiliriz. Ve fark ettiğiniz üzere diğer tablo etiketleri bu etiketin içerisine yazılıyor. Ayrıca width="100%" ile tablonun genişliğini 100% olarak belirlemek için kullandık. <tbody> ise, tablonun içeriğinin yer aldığı etikettir. İçerisinde ise satırlar için <tr> sütunlar için <td> etiketleri vardır. Birden fazla satırlı tablo için birden fazla <tr> eklenmektedir. Yukarıdaki kodların çıktısı şöyle gözükecektir;

Tablo Header (Başlık)

Tablonun başlık kısmını belirlemek için <thead> etiket kullanılıyor. İçerisinde satırlar için yine <tr> etiketi ancak sütunları için bu sefer <th> etiketi geliyor. Hemen bir örnek verelim;

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Ay</th>
            <th>Kazanç</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ocak</td>
            <td>100₺</td>
        </tr>
        <tr>
            <td>Şubat</td>
            <td>200₺</td>
        </tr>
    </tbody>
</table>

Tarayıcıda çıktısı ise şöyle olacaktır;

Tablo Footer (Alt Bilgi)

Aynı zamanda tablonun alt bilgisini belirlemek için <tfoot> etiketi kullanılıyor. Bu bağlamda aslında <table> etiketi 3 etiketten ibaret, başlık için <thead> tablo içeriği için <tbody> ve alt bilgi içinde <tfoot> etiketi. Bir örnekle anlamlı kılalım.

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Ad-soyad</th>
            <th>Yaş</th>
        </tr>
    </thead>
    <tbody>
       <tr>
            <td>Ocak</td>
            <td>100₺</td>
        </tr>
        <tr>
            <td>Şubat</td>
            <td>200₺</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Toplam</td>
            <td>300₺</td>
        </tr>
    </tfoot>
</table>

Bu kodların çıktısı ise şöyle olacaktır;

Tabloda colspan ve rowspan Nitelikleri

Tabloda sütunları birleştirmek için colspan niteliği, satırları birleştirmek için rowspan niteliği kullanılır. Örnek vermek gerekirse;

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Yıl</th>
            <th>İsim</th>
            <th>Meslek</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2019</td>
            <td>Tayfun Erbilen</td>
            <td>Web Developer</td>
        </tr>
        <tr>
            <td colspan="2">Mehmet Seven - Web Developer</td>
        </tr>
    </tbody>
</table>

Bu örnekte ben ilk satırda 1. sütunu yani yıl değerini rowspan="2" diyerek 2 satırı birleştirdim. Yani 2. satırda gördüğünüz gibi bir daha yıl yazmadım çünkü üstte 2 satırı birleştirmiştim bu yüzden. 2. satırda ise bu sefer 2 sütunu birleştirdim. Bunuda colspan="2" diyerek yaptım. Yani İsim ve Meslek alanlarını tek bir sütunda yazdırmış oldum. Bu kodların sonucu ise şöyle olacaktır;

Şimdilik tablo ile ilgili söyleyeceklerim bu kadar, HTML Etiket Listesi sayfasından zaten tüm etiketleri tek tek inceleyebilirsiniz, oradan bu etiketlerin tamamının daha ayrıntılı bir listesine ulaşabilirsiniz.