HTML’de Tablo Ekleme: Kapsamlı Bir Kılavuz
HTML tabloları, web sayfalarında veriyi yapılandırmak ve görüntülemek için kullanılan güçlü bir araçtır. Verileri satır ve sütunlar halinde düzenleyerek, kullanıcıların bilgileri kolayca taramasına ve anlamasına olanak tanırlar. Bu kılavuz, HTML’de tablo oluşturmak için gereken tüm temel bilgileri ve gelişmiş teknikleri kapsayacaktır.
Temel Tablo Yapısı
Bir HTML tablosu, <table> ve </table> etiketleri arasına yerleştirilir. Tablonun başlığı <caption> etiketiyle belirtilir. Her satır <tr> etiketiyle başlar ve </tr> etiketiyle biter. Her sütun <td> etiketiyle başlar ve </td> etiketiyle biter.
“`html
| Veri 1 | Veri 2 | Veri 3 |
| Veri 4 | Veri 5 | Veri 6 |
“`
Tablo Özelliklerini Ayarlama
Tabloların görünümünü ve davranışını özelleştirmek için çeşitli özellikler kullanılabilir.
- border: Tablonun kenarlık kalınlığını ayarlar.
- cellpadding: Hücreler arasındaki boşluğu ayarlar.
- cellspacing: Hücreler arasındaki boşluğu ayarlar.
- width: Tablonun genişliğini ayarlar.
- height: Tablonun yüksekliğini ayarlar.
- align: Tabloyu sayfada hizalar.
“`html
“`
Başlıklar ve Alt Başlıklar
Tablo başlıkları ve alt başlıkları, <th> etiketiyle belirtilir. Başlıklar varsayılan olarak kalın ve ortalanmıştır.
“`html
| Başlık 1 | Başlık 2 | Başlık 3 |
|---|---|---|
| Veri 1 | Veri 2 | Veri 3 |
“`
Tabloları Birleştirme ve Bölme
colspan ve rowspan özellikleri, hücreleri birleştirmek veya bölmek için kullanılır. colspan, bir hücrenin yatay olarak kaç sütunu kaplayacağını belirtirken, rowspan, bir hücrenin dikey olarak kaç satırı kaplayacağını belirtir.
“`html
| Birleştirilmiş Hücre | Veri 3 | |
| Bölünmüş Hücre | Veri 4 | Veri 5 |
| Veri 6 | ||
“`
Gelişmiş Tablo Teknikleri
- Tablo Sıralama:
sortableözelliği, kullanıcıların tabloları sütunlarına göre sıralamasına olanak tanır. - Tablo Filtreleme:
filterableözelliği, kullanıcıların tabloları belirli kriterlere göre filtrelemesine olanak tanır. - Tablo Düzenleme:
contenteditableözelliği, kullanıcıların tablo hücrelerini doğrudan tarayıcıda düzenlemesine olanak tanır. - Tablo Efektleri: CSS, tabloların görünümünü ve davranışını daha da özelleştirmek için kullanılabilir.