Tablolar

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Tablo, satır ve sütunlar arasındaki ilişkiyi anlatır. Bir fiyat listesi veya ders programı buna örnektir. Sayfanın sağ ve sol sütununu tabloyla kurmak ise içerik anlamı ile yerleşimi karıştırır; görsel düzen için CSS Grid veya Flexbox kullanılır. Önce verinin satır ve sütun başlıklarını kâğıt üzerinde belirle.

th bir başlık hücresidir. scope="col" o başlığın bir sütunu, scope="row" bir satırı tanımladığını bildirir. caption tablonun ne hakkında olduğunu açıklayan bir başlıktır. Bu bilgiler ekran okuyucunun hücreler arasındaki ilişkiyi aktarabilmesine yardımcı olur; kalın yazı vermekle aynı şey değildir.

Tablo küçük ekranda genişleyebilir. İçindeki veriyi sıkıştırıp okunamaz yapmak yerine gerektiğinde tabloyu kendi yatay kaydırma alanına al. Sayfanın tamamını yatay kaydırmak bir çözüm değildir. Başlıkların her satırla doğru eşleştiğini ve uzun kelimelerin hücre sınırlarını bozmadığını kontrol et.

İlk örneği oku ve dene

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #64748b; padding: 8px; }
</style>
<table>
  <tr>
    <th>Dil</th>
    <th>Örnek kullanım</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>Otomasyon</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>Sunucu uygulamaları</td>
  </tr>
</table>

İki sütunlu, çizgili bir tablo: üstte kalın "Dil" ve "Örnek kullanım" başlıkları, altında iki satır.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. caption tablonun konusunu açıklar.
2. thead sütun başlıklarını, tbody veri satırlarını gruplar.
3. Her veri satırındaki hücre sayısı başlık düzeniyle uyumlu olmalıdır.
4. CSS kenarlık ekler; veri ilişkisinin anlamını ise HTML taşır.

<table>
  <caption>Haftalık çalışma</caption>
  <thead><tr><th scope="col">Gün</th><th scope="col">Dakika</th></tr></thead>
  <tbody>
    <tr><th scope="row">Pazartesi</th><td>30</td></tr>
    <tr><th scope="row">Salı</th><td>45</td></tr>
  </tbody>
</table>

Gün ve Dakika sütunlarında Pazartesi 30, Salı 45 verileri.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. İki sütunlu ve üç veri satırlı bir tablo oluştur.
2. caption ekle; satır ve sütun başlıklarında scope kullan.
3. Ekranı 320 piksele daralt; gerekirse tabloyu overflow-x:auto alanına al.

<div style="overflow-x:auto">
<table>
<caption>Örnek fiyatlar</caption>
<tr><th scope="col">Ürün</th><th scope="col">TL</th></tr>
<tr><th scope="row">Defter</th><td>25</td></tr>
<tr><th scope="row">Kalem</th><td>10</td></tr>
</table>
</div>

İki ürün ve fiyatları; kapsayıcı gerektiğinde yatay kaydırılır.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Başlık yerine td kullanıp yazıyı kalınlaştırmak başlık ilişkisini kurmaz; th ve scope kullan.
2. Tabloyu sayfa yerleşimi için kullanma; bir kartın sağa geçmesi tablo verisi değildir.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

caption ve th aynı şeyi mi yapar?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.