HTML Tablo Oluşturma

HTML Tablo; Bir web sayfasındaki, günlük haytta kullandığımız tabloların özeliklerini taşıyan bir yapıdır.

HTML Tabloları; tablo adı, tablo satırları ve satırlar içindeki hücrelerden oluşur. Buna ek olarak istenirse, tablo kenarları (çerçeve) kalınlığı verilebilir, hücreler arası boşluk ayarlanabilir. Hücrelerde yazılan metinlerin ya da sayıların hücre içindeki konumları belirlenebilir. Bu konumlar yatay doğrultuda ortada, sağa yanaşık, sola yanaşık yapılabilir. Düşey doğrultuda ise ortada, tabanda ya da tepede olabilir. Hücre zemini ve yazıların renkleri de verilebilir.

Başlıca HTML Tablo Etiketleri

HTML Tablo oluşturulurken hem tarayıcının hemde okuyucunun anlayabilmesi için belirli kurallara göre yazılır. Bazı etiketler tarayıcıların ayrıştırması için olsa da bazı etiketler de okuyucuya daha şık gözükmesi ve daha rahat okunabilmesi içindir.

Tablo Etiketi (<table>)

Bu etiket ile tablonun oluşturulacağını belirtiriz. Bu etiketle birlikte oluşturacağımız tablo başlamış olur. Tarayıcılar da bu etiketi algıladıkları gibi ardından bir tablonun geldiğini anlarlar.

Tablo Kafa Etiketi (<thead>)

bu etiket ile tablonun kafa kısmını belirtiriz. Bu etiket içerisinde yazılan kodlar tablonun kafasında yer alır.

Tablo Gövde Etiketi (<tbody>)

bu etiket ile tablonun gövde kısmını belirtiriz. Bu etiket içerisinde yazılan kodlar tablonun gövdesinde yer alır. Genellikle tablonun büyük çoğunluğu bu kısımda yer alır.

Tablo Alt Kısım Etiketi (<tfoot>)

bu etiket ile tablonun alt kısmını belirtiriz. Bu etiket içerisinde yazılan kodlar tablonun alt kısmında yer alır.

Tablo Başlık Etiketi (<th>)

Bu etiket ile yapılan tablonun başlığı belirlenir. Hem görüntü olarak hem de seo’ya katkısı olarak çok etkili bir etikettir.

Satır Etiketi (<tr>)

Bu etiket ile tablo içindeki satırları belirleriz. Kaç satırdan oluşacağını tablo içerisindeki ‘Satır Etiketi’ sayısı belirler. Tarayıcı kendini bu etikete göre ayarlayıp satır sayısı oluşturur.

Sütun Etiketi (<td>)

Bu etiket ile tablo içindeki Sütunları belirleriz. Kaç sütundan oluşacağını tablo içerisindeki ‘Sütun Etiketi’ sayısı belirler. Tarayıcı kendini bu etikete göre ayarlayıp sütun sayısı oluşturur.

<table border="1">
        <thead>
            <tr>
                <th>Başlık-1</th>
                <th>Başlık-2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>satır-1, sütun-1</td>
                <td>satır-1, sütun-2</td>
            </tr>
            <tr>
                <td>satır-2, sütun-1</td>
                <td>satır-2, sütun-2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Footer-1</td>
                <td>Footer-2</td>
            </tr>
        </tfoot>
  </table>

Başlık-1	Başlık-2
satır-1, sütun-1	satır-1, sütun-2
satır-2, sütun-1	satır-2, sütun-2
Footer-1	Footer-2