Ders 5 – Tabloların Temeli

1. Neleri Öğreneceksin?

• <table> etiketi ile tablo oluşturmayı,
• <tr> ile satır eklemeyi,
• <td> ile hücre (gövdedeki veri) yazmayı,
• <th> ile başlık hücresi eklemeyi,
• Küçük bir örnekle colspan ve rowspan kullanımını görmeyi öğreneceksin.

2. En Basit Tablo Yapısı: <table>, <tr>, <td>

Bir tablo oluşturmak için önce <table> etiketiyle tablonun alanını başlatırız. Her satır için <tr> (table row), satırın içindeki her hücre için de <td> (table data) kullanılır.

<table>
  <tr>
    <td>Ad</td>
    <td>Soyad</td>
    <td>Sınıf</td>
  </tr>
  <tr>
    <td>Ayşe</td>
    <td>Yılmaz</td>
    <td>9/A</td>
  </tr>
</table>

💡 Not: Tasarım için aslında CSS kullanılmalı. Buradaki border ve cellpadding gibi özellikler sadece tabloyu daha net görebilmen için kullanıldı.

3. Başlık Hücreleri: <th>

Tablo başlıklarını diğer hücrelerden ayırmak için <th> (table header) etiketi kullanılır. Genelde tablonun en üst satırında yer alır ve kalın, ortalanmış şekilde görünür.

<table>
  <tr>
    <th>Ad</th>
    <th>Soyad</th>
    <th>Not</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Demir</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Zeynep</td>
    <td>Kaya</td>
    <td>92</td>
  </tr>
</table>

4. Hücre Birleştirme: colspan ve rowspan

Bazen bazı hücreleri birleştirip daha geniş bir alan oluşturmak isteyebilirsin. Bunun için:

• colspan: Hücrenin yatayda (sütunlar arasında) birleşmesini sağlar.
• rowspan: Hücrenin dikeyde (satırlar arasında) birleşmesini sağlar.

Aşağıdaki örnekte bir haftalık mini ders programı var:

<table>
  <tr>
    <th>Gün</th>
    <th>1. Ders</th>
    <th>2. Ders</th>
  </tr>
  <tr>
    <td>Pazartesi</td>
    <td>Matematik</td>
    <td>Türkçe</td>
  </tr>
  <tr>
    <td>Salı</td>
    <td colspan="2">Bilişim Teknolojileri</td>
  </tr>
  <tr>
    <td rowspan="2">Çarşamba</td>
    <td>Fen Bilimleri</td>
    <td>İngilizce</td>
  </tr>
  <tr>
    <td>Müzik</td>
    <td>Beden Eğitimi</td>
  </tr>
</table>

💡 Bu derste colspan ve rowspan’ı sadece temel mantığını görmek için kullanıyoruz. İleride daha karmaşık tablolar yapman gerekirse bu iki özelliği tekrar inceleyebilirsin.

5. Tablo Ne Zaman Kullanılmalı?

Tablolar sadece gerçekten “satır–sütun yapısında veri” göstermek için kullanılmalıdır. Örneğin:

• Not çizelgesi,
• Ders programı,
• Ürün fiyat listesi,
• Katılımcı listesi.

Sayfa düzeni kurmak için tablo kullanmak yanlıştır. Sayfa düzeni için CSS (özellikle flexbox ve grid) kullanılır.

6. Mini Görev – Kendi Ders Programın

Şimdi kendi ders programını bir HTML tablosu olarak oluşturarak pratik yapacaksın:

1. Proje klasöründe yeni bir dosya oluştur: ders-programi.html.
2. Sayfanın en üstüne bir <h1> yaz: “Haftalık Ders Programım” gibi.
3. En az 3 gün ve 4 ders saati içeren bir <table> oluştur.
4. İlk satırda gün ve ders saatleri için <th> kullan.
5. İstersen aynı gün içindeki teneffüsleri göstermek için bir satırda colspan, günleri birleştirmek için bir yerde rowspan kullanmayı dene.
6. Dosyayı kaydedip tarayıcıda görüntüle. Tabloyu öğretmeninle paylaş.

Bir sonraki derste formlarla kullanıcıdan bilgi almayı öğreneceğiz. O derste bu tabloları not giriş formu ile birleştirmen mümkün olacak. 🙂

Kaynaklar

• MDN – “HTML tables” dokümanları
• Yeşil Bilişim: HTML Ders 1–4 notların