HTML Tablolar

HTML tabloları, verileri düzenli bir şekilde sunmak için mükemmel bir araçtır. Web sayfanızda verileri sıralamak, analiz etmek veya karşılaştırmak için tablolar kullanabilirsiniz. Doğru kullanıldığında, hem kullanıcı deneyimini iyileştirir hem de SEO açısından sayfanızın daha erişilebilir olmasını sağlar.

HTML’de bir tablo oluşturmak için kullanılan başlıca etiketler şunlardır:

1. <table> – Tablo Başlatma
2. <tr> – Tablo Satırı (Table Row)
3. <th> – Tablo Başlığı (Table Header)
4. <td> – Tablo Verisi (Table Data)
5. <caption> – Tablo Başlığı
6. <thead> – Tablo Başlık Kısmı
7. <tbody> – Tablo İçeriği
8. <tfoot> – Tablo Alt Kısmı

1. Tablo Başlatma (<table>)

Tabloyu oluşturmak için <table> etiketini kullanırsınız. Bu etiket, tabloyu başlatır ve tüm tablo içeriğini kapsar.

Örnek:

<table>
    <!-- Tablo içeriği buraya gelecek -->
</table>

2. Tablo Satırı (<tr>)

Tabloda her bir satırı tanımlamak için <tr> etiketini kullanırsınız. Bu etiket, tablonuzdaki her satırı oluşturur.

Örnek:

<table>
    <tr>
        <!-- Tablo satırı içeriği buraya gelecek -->
    </tr>
</table>

3. Tablo Başlığı (<th>)

Tablo başlıklarını oluşturmak için <th> etiketini kullanırsınız. Bu etiket, hücreyi kalın ve ortalanmış olarak görüntüler. Genellikle tablo başlıkları için kullanılır.

Örnek:

<table>
    <tr>
        <th>İsim</th>
        <th>Yaş</th>
        <th>Meslek</th>
    </tr>
</table>

4. Tablo Verisi (<td>)

Tablo verisini eklemek için <td> etiketini kullanırsınız. Bu etiket, her hücreyi temsil eder.

Örnek:

<table>
    <tr>
        <td>Ahmet</td>
        <td>25</td>
        <td>Yazılım Geliştirici</td>
    </tr>
</table>

5. Tablo Başlığı Eklemek (<caption>)

Tablonuza başlık eklemek için <caption> etiketini kullanabilirsiniz. Bu etiket, tablonun başına başlık ekler.

Örnek:

<table>
    <caption>Çalışanlar Tablosu</caption>
    <tr>
        <th>İsim</th>
        <th>Yaş</th>
        <th>Meslek</th>
    </tr>
</table>

6. Tablo Bölümleri: <thead>, <tbody>, <tfoot>

Tablolarınızı daha düzenli hale getirmek için başlık, içerik ve alt kısmı ayrı ayrı tanımlayabilirsiniz. Bunun için sırasıyla <thead>, <tbody>, ve <tfoot> etiketlerini kullanabilirsiniz.

Örnek:

<table>
    <thead>
        <tr>
            <th>İsim</th>
            <th>Yaş</th>
            <th>Meslek</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ahmet</td>
            <td>25</td>
            <td>Yazılım Geliştirici</td>
        </tr>
        <tr>
            <td>Mehmet</td>
            <td>30</td>
            <td>Grafik Tasarımcı</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Toplam Kişi: 2</td>
        </tr>
    </tfoot>
</table>

Tablo Kullanımında SEO ve Erişilebilirlik İpuçları

• Semantik HTML Kullanımı: Tablo başlıkları (<th>) ve veri hücreleri (<td>) arasındaki farkı net bir şekilde belirtmek, arama motorlarının ve ekran okuyucu teknolojilerinin içeriğinizi daha iyi anlamasını sağlar.
• Başlık Ekleyin: Tabloya başlık eklemek, tablonun ne hakkında olduğunu kullanıcıya ve arama motorlarına açıklığa kavuşturur.
• Veri Düzenini Korumak: Tablolar, verilerinizi düzenli ve sıralı bir şekilde sunar. Bu, kullanıcıların bilgiyi hızlıca taramasını sağlar ve sayfa etkileşimini artırır.