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">
    <tbody>
        <tr>
            <td>Emin Yılmaz</td>
            <td>23/td>
        </tr>
        <tr>
            <td>Mahmud Yılmaz</td>
            <td>28</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.  <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 tarayıcıda çıktısı ise şöyle olacaktır;

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">
    <thead>
        <tr>
            <th>Adı</th>
            <th>Soyadı</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Emin</td>
            <td>Yılmaz</td>
        </tr>
        <tr>
            <td>Serkan</td>
            <td>Tunç</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">
    <thead>
        <tr>
            <th>Ad-soyad</th>
            <th>Yaş</th>
        </tr>
    </thead>
    <tbody>
       <tr>
            <td>Emin Yılmaz</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Serkan Tunç</td>
            <td>20</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Ad-soyad</th>
            <th>Yaş</th>
        </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">
    <thead>
        <tr>
            <th>Yıl</th>
            <th>İsim</th>
            <th>Meslek</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2019</td>
            <td>Emin Yılmaz</td>
            <td>Designer & Web Developer</td>
        </tr>
        <tr>
            <td colspan="2">Serkan Tunç - Game 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;

HTML Table Etiketi Parametreleri

border : border="5" çerçeve kalınlığı belirler.
bordercolor : bordercolor="#ff0000" çerçeve rengini belirler.
bgcolor : bgcolor="#ffff00" tablo arkaplan rengini belirler.
background : background="arkaplan.jpg" tablonun veya hücrenin arkaplanına bir resim eklemek için kullanılır.
Width : width="400" tablo genişliğini belirler.
Height : height="250" tablo yüksekliğini belirler.
Align : align="right" tabloyu hizalama.
Valign : valign="top" dikey Hizalama
Colspan : Bu parametre aynı satırdaki hücrelerin birleştirilmesi için kullanılır.
Rowspan : Bu parametre ile aynı sütunda bulunan hücreler birleştirilir.
Cellspacing : cellspacing="15" tablodaki hücrelerin birbirlerine olan uzaklığını belirlemek için kullanılır.
Cellpadding : cellpadding="15" hücreler içindeki verilerin hücre kenarına olan uzaklığını belirlemek için kullanılır.