CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Gövde verisi

HTML kursu · Orta seviye · Ders 26/67

Veri satırlarını tbody içine mantıksal sırayla eklersin.

Gövde verisi: tbody, tr, td

Tablonun asıl verisi tbody içinde yaşar. Her satır bir tr, her veri hücresi bir td'dir. Sütun sayısı kadar hücre olmalı; aksi halde tablo düzensiz görünür. İlk hücre bir satır başlığıysa th scope="row" kullanılır; değilse td yeterlidir. Bu derste dört aylık satış verisini tbody'ye ekleyeceğiz.

Veri sırası ve satır başlığı

Veriyi mantıklı bir sırayla koy: zamana göre (eskiden yeniye) ya da büyüklüğe göre. Bu örnekte aylar Ocak'tan Nisan'a kronolojik gider. İlk sütun satırı tanımladığı için th scope="row" kullanmak doğal bir seçimdir; ekran okuyucu "Ocak, 320 adet, ₺32.000" gibi bir bağlam kurabilir. Veri hücrelerinde içerik kısa ve net olmalı.

Uygulama tbody ve dört satır ekle

Önceki dersin tablosunu al. </thead>'den sonra bir <tbody> aç. İçine dört <tr> ekle; her satırın ilk hücresi th scope="row" (Ocak, Şubat, Mart, Nisan), ardından üç td (ürün, adet, ciro) gelsin. Veriler: Ocak/Kulaklık/320/₺32.000, Şubat/Kale/280/₺28.000, Mart/Klavye/410/₺41.000, Nisan/Fare/440/₺44.000.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Aylık Satış Raporu</title>
  </head>
  <body>
    <table>
      <caption>Aylık Satış Raporu — 2026</caption>
      <thead>
        <tr>
          <th scope="col">Ay</th>
          <th scope="col">Ürün</th>
          <th scope="col">Adet</th>
          <th scope="col">Ciro</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Ocak</th>
          <td>Kulaklık</td>
          <td>320</td>
          <td>₺32,000</td>
        </tr>
        <tr>
          <th scope="row">Şubat</th>
          <td>Kale</td>
          <td>280</td>
          <td>₺28,000</td>
        </tr>
        <tr>
          <th scope="row">Mart</th>
          <td>Klavye</td>
          <td>410</td>
          <td>₺41,000</td>
        </tr>
        <tr>
          <th scope="row">Nisan</th>
          <td>Fare</td>
          <td>440</td>
          <td>₺44,000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Kendini test et

  1. Dört sütun başlığı olan bir tabloda her gövde satırında kaç hücre olmalı?

    • 3
    • 5
    • 8
    • 4
    Cevabı göster

    4 — Doğru. Gövde satırındaki hücre sayısı sütun sayısına eşit olmalı.

  2. Veri hücresinin içeriğini tamamla

    <td>____</td>
    Cevabı göster 
    <td>Kulaklık</td>

  3. Tablo elemanını içerik türüyle eşleştir

    tbody
    Veri satırları
    tr
    Tablo satırı
    td
    Veri hücresi
    th
    Başlık hücresi

Orta seviye bölümündeki tüm dersler

1 İleri metin etiketleri

  1. Abbr, cite ve time
  2. Code, kbd ve samp
  3. Sub ve sup
  4. Pre ve code bloğu
  5. Wbr ve bdi, bdo
  6. Özet - Teknik doküman

2 İleri bağlantılar

  1. Download bağlantıları
  2. Ping ve rel türleri
  3. Hreflang ve canonical
  4. Bağlantı erişilebilirliği
  5. Buton vs bağlantı
  6. Özet - Çok dilli menü

3 Proje: Landing sayfası

  1. Proje: Ürün landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat tablosu
  5. Proje sonu - Landing

4 İleri tablolar

  1. Col ve colgroup
  2. Scope ve headers
  3. Tablo erişilebilirliği
  4. Responsive tablolar
  5. Tablo görsel yapısı
  6. Özet - Karşılaştırma tablosu

5 Proje: Veri tablosu

  1. Proje: Veri tablosu
  2. Başlık ve caption
  3. Gövde verisi
  4. Toplam satırı
  5. Proje sonu - Veri tablosu

6 İleri form öğeleri

  1. Fieldset ve legend
  2. Datalist ve output
  3. Progress ve meter
  4. Input öznitelikleri
  5. Autocomplete ve inputmode
  6. Özet - Anket formu

7 Form doğrulama

  1. Required ve pattern
  2. Min, max ve step
  3. Minlength ve maxlength
  4. Type-based doğrulama
  5. Novalidate ve formnovalidate
  6. Özet - Kayıt formu doğrulama

8 Proje: İletişim formu

  1. Proje: İletişim formu
  2. Form iskeleti
  3. Kişi alanları
  4. Mesaj ve konu
  5. Proje sonu - İletişim formu

9 Anlamsal düzen

  1. Header yapısı
  2. Ana içerik
  3. Sidebar ve aside
  4. Footer yapısı
  5. Bölümleme kuralları
  6. Özet - Magazin sayfası

10 Erişilebilirlik temelleri

  1. ARIA temelleri
  2. Saklı başlık
  3. Skip link
  4. Form erişilebilirliği
  5. Tablo erişilebilirliği
  6. Özet - Erişilebilir kart

11 Proje: Site iskeleti

  1. Proje: Çok sayfalı site iskeleti
  2. Tutarlı header/footer
  3. Ana sayfa
  4. Hakkında ve iletişim
  5. Proje sonu - Site iskeleti

12 Orta seviye finali

  1. Meydan okuma - İleri metin
  2. Meydan okuma - Erişilebilir tablo
  3. Meydan okuma - Doğrulamalı form
  4. Meydan okuma - Anlamsal düzen
  5. Meydan okuma - Orta seviye projesi