Tablolar (İleri Düzey)

Bu dersimizde Temel HTML5 Dersleri'nde gördüğümüz temel düzey tablolar konusunu biraz daha ileri götüreceğiz.

<thead>, <tbody>, <tfoot>, <col>, <colgroup> ve <caption> etiketleri

<thead> tablomuzdaki konu başlıklarının yer aldığı <th> etiketlerini kapsar. <tbody> tablodaki asıl içeriği belirtir. <tfoot> tablonun içeriklerinin hesaplanıp özetlendiği son satırını oluşturur. <col>, column yani sütun kelimesinin kısaltmasıdır. Tablodaki sütunlara stil vermek için kullanılır. Birden fazla sütuna stil vermek içinse <colgroup> etiketini kullanmalıyız. <caption> etiketi ile tablonun açıklamasını ya da tanımlamasını yazabiliriz.

Aşağıdaki örnekte tüm bu açıklamaları daha detaylı görebilirsiniz.

        <table border="1" cellpadding="5">
            <caption>Aylık Hasılat</caption>
            <colgroup>
                <col style="background-color:skyblue;"> 
                <col style="background-color:lightgreen"> 
                <col style="background-color:violet"> 
            </colgroup>
            <thead>
                <tr>
                    <th>Ay</th>
                    <th>Gelir</th>
                    <th>Gider</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ocak</td>
                    <td>100 TL</td>
                    <td>20 TL</td>
                </tr>
                <tr>
                    <td>Şubat</td>
                    <td>80 TL</td>
                    <td>10 TL</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Toplam</td>
                    <td>180 TL</td>
                    <td>30 TL</td>
                </tr>
            </tfoot>
        </table>
    

Bu tablonun ekran görüntüsü ise şu şekilde olacaktır:

Aylık Hasılat
Ay Gelir Gider
Ocak 100 TL 20 TL
Şubat 80 TL 10 TL
Toplam 180 TL 30 TL

cellpadding atfı tablonun iç hücre boşluğunu belirtmektedir. Örnekte 5px hücre içi boşluğu verilmiştir.

colspan ve rowspan atıfları ile hücreleri birleştirme

Bazen oluşturduğumuz tabloda iki satırı ya da sütunu birleştirmek isteyebiliriz. Bunun için colspan atfını kullanabiliriz.

Aşağıdaki örnekte bunu daha detaylı görebilirsiniz:

        <table border="1" cellpadding="5" style="text-align: center;">
            <tr>
                <th>Rumuz</th>
                <th colspan="2">e-Posta</th>
            </tr>
            <tr>
                <td>zinzinzibidi</td>
                <td>zinzinzibidi@gmail.com</td>
                <td>zinzinzibidi@hotmail.com</td>
            </tr>
        </table>
    

Şimdi de çıktımıza bakalım.

Rumuz e-Posta
zinzinzibidi zinzinzibidi@gmail.com zinzinzibidi@hotmail.com

Yukarıdaki örnekte e-Posta adlı tablo başlığı colspan atfı ile birleştirilmiştir. Aynı şekilde rowspan atfı ile iki satırı birleştirebiliriz:

        <table border="1" cellpadding="5">
            <tr>
              <th>Rumuz</th>
              <td>zinzinzibidi</td>
            </tr>
            <tr>
              <th rowspan="2">e-Posta</th>
              <td>zinzinzibidi@gmail.com</td>
            </tr>
            <tr>
              <td>zinzinzibidi@hotmail.com</td>
            </tr>
        </table>
    

Çıktımız ise şu şekilde olacaktır:

Rumuz zinzinzibidi
e-Posta zinzinzibidi@gmail.com
zinzinzibidi@hotmail.com
Diğer derse geçmek için tıklayınız. >>>
Need a light? Beboobeep!