PricingLoginStart free
HTML Academy · Pelajaran

Struktur thead tbody tfoot

Atur baris tabel ke dalam bagian header, isi, dan footer semantik.

Pelajaran 2 dari 414 langkah

Struktur thead tbody tfoot adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Bagian-Bagian Tabel

Tabel HTML lengkap memiliki tiga bagian yang bersifat opsional tetapi disarankan:

  • <thead> — baris tajuk
  • <tbody> — baris isi (data utama)
  • <tfoot> — baris kaki (total, ringkasan)

thead

Elemen <thead> membungkus baris tajuk:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

Elemen <tbody> membungkus baris data utama:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

Elemen <tfoot> membungkus baris kaki — biasanya berisi total atau ringkasan:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Tabel Terstruktur Lengkap

Tabel lengkap dengan ketiga bagian:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Mengapa Menggunakan thead/tbody/tfoot?

Manfaat struktur tabel:

  • Semantik — pembaca layar memahami perbedaan tajuk, data, dan ringkasan
  • Penerapan CSS — berikan gaya pada setiap bagian secara terpisah
  • Pencetakan — thead diulang pada setiap halaman yang dicetak
  • Pengguliran — gulir tbody secara terpisah menggunakan luapan CSS

tbody yang Dapat Digulir

Buat hanya bagian isi yang dapat digulir sementara tajuk tetap:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

tbody Implisit

Jika Anda menghilangkan <tbody>, browser akan menambahkannya secara otomatis:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Beberapa Elemen tbody

Sebuah tabel dapat memiliki beberapa kelompok <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Memberi Gaya pada Bagian Tabel

Tentukan bagian dengan CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Perilaku Pembaca Layar

Dengan struktur thead/tbody yang tepat, pembaca layar dapat:

  • Menyebutkan tajuk kolom sebagai konteks untuk setiap sel data
  • Bernavigasi di antara berbagai bagian (wilayah tajuk dan wilayah data)
  • Memberi tahu pengguna jumlah baris dan kolom yang ada

Baris thead dengan Beberapa Baris

thead dapat memiliki beberapa baris untuk tajuk yang kompleks:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Pemeriksaan Singkat

Di mana tfoot biasanya muncul dalam sumber HTML dibandingkan dengan tabel yang ditampilkan?

Jawab di pelajaran interaktif

Rangkuman: thead tbody tfoot

Hal penting tentang struktur tabel:

  • <thead> — baris tajuk (diulang saat dicetak)
  • <tbody> — baris data (dapat berjumlah beberapa)
  • <tfoot> — baris ringkasan atau total
  • Memungkinkan penentuan bagian CSS dan pembacaan tabel yang mudah diakses
  • Selalu tulis tbody secara eksplisit meskipun browser menambahkannya
Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
40
Pelajaran
159
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur thead tbody tfoot” gratis?

Ya — teks lengkap “Struktur thead tbody tfoot” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Struktur thead tbody tfoot”?

Atur baris tabel ke dalam bagian header, isi, dan footer semantik. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Struktur thead tbody tfoot” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. table tr td dan th
  2. Struktur thead tbody tfoot
  3. colspan dan rowspan untuk Rentang Sel
  4. Aksesibilitas Tabel: scope summary caption
← Kembali ke HTML Academy