Tabel & thead/tbody

Tabel & thead/tbody 📊

Tabel HTML digunakan untuk menampilkan data yang terstruktur dalam baris dan kolom — seperti spreadsheet, jadwal, daftar harga, atau laporan. Bukan untuk layout halaman.

Struktur Dasar Tabel

Tabel dibentuk oleh beberapa tag yang bekerja bersama:

• <table> — pembungkus utama seluruh tabel
• <tr> — table row, satu baris horizontal
• <th> — table header, sel judul kolom (tebal & center secara default)
• <td> — table data, sel isi data biasa

<table>
  <tr>
    <th>Nama</th>
    <th>Kota</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Semarang</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Sari</td>
    <td>Yogyakarta</td>
    <td>22</td>
  </tr>
</table>

Hasilnya:

┌──────────┬─────────────┬───────┐
│  Nama    │    Kota     │ Usia  │
├──────────┼─────────────┼───────┤
│  Budi    │  Semarang   │  25   │
│  Sari    │  Yogyakarta │  22   │
└──────────┴─────────────┴───────┘

Mengapa Tabel Tidak Punya Border Secara Default?

Secara default tabel HTML tampil tanpa garis. Untuk menampilkan border, gunakan CSS:

<style>
  table {
    border-collapse: collapse;   /* menggabungkan border agar tidak dobel */
    width: 100%;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px 14px;
    text-align: left;
  }

  th {
    background-color: #4a9eed;
    color: white;
  }
</style>

border-collapse: collapse adalah properti yang hampir selalu digunakan bersama tabel — tanpanya, setiap sel akan memiliki border dobel yang terlihat aneh.

Struktur Semantik — <thead>, <tbody>, <tfoot>

Tabel yang baik secara semantik dibagi menjadi tiga bagian:

• <thead> — bagian kepala tabel (judul kolom)
• <tbody> — bagian isi / data utama tabel
• <tfoot> — bagian kaki tabel (total, kesimpulan, catatan)

<table>

  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
      <th>Stok</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Rp 8.000.000</td>
      <td>5</td>
      <td>Rp 40.000.000</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>Rp 150.000</td>
      <td>20</td>
      <td>Rp 3.000.000</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>Rp 300.000</td>
      <td>15</td>
      <td>Rp 4.500.000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3"><strong>Grand Total</strong></td>
      <td><strong>Rp 47.500.000</strong></td>
    </tr>
  </tfoot>

</table>

Hasilnya:

┌──────────┬──────────────┬───────┬────────────────┐
│  Produk  │    Harga     │ Stok  │     Total      │   ← thead
├──────────┼──────────────┼───────┼────────────────┤
│  Laptop  │ Rp 8.000.000 │   5   │ Rp 40.000.000  │
│  Mouse   │ Rp   150.000 │  20   │ Rp  3.000.000  │   ← tbody
│ Keyboard │ Rp   300.000 │  15   │ Rp  4.500.000  │
├──────────┼──────────────┼───────┼────────────────┤
│          Grand Total    │       │ Rp 47.500.000  │   ← tfoot
└──────────┴──────────────┴───────┴────────────────┘

Mengapa Harus Pakai <thead> dan <tbody>?

Meski tabel bisa berfungsi tanpa keduanya, penggunaannya memberikan banyak manfaat:

1. Semantik & Aksesibilitas — Screen reader dapat membedakan mana judul kolom dan mana isi data, sehingga lebih mudah dibacakan kepada pengguna tunanetra.

2. Styling Terpisah — Bisa memberi warna berbeda untuk header, body, dan footer dengan CSS yang lebih rapi:

thead {
  background-color: #1e3a5f;
  color: white;
}

tbody tr:nth-child(even) {
  background-color: #f0f4ff;   /* warna selang-seling baris */
}

tfoot {
  background-color: #f5f5f5;
  font-weight: bold;
}

3. Scroll Independen — Saat tabel sangat panjang, <tbody> bisa dibuat scroll sendiri sementara <thead> tetap terlihat di atas:

tbody {
  display: block;
  max-height: 300px;
  overflow-y: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

Caption — Judul Tabel

Tag <caption> digunakan untuk memberi judul pada tabel — tampil di atas tabel secara default dan penting untuk aksesibilitas:

<table>
  <caption>Daftar Nilai Siswa Semester Ganjil 2025</caption>

  <thead>
    <tr>
      <th>Nama Siswa</th>
      <th>Matematika</th>
      <th>Bahasa Indonesia</th>
      <th>IPA</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Andi Pratama</td>
      <td>85</td>
      <td>90</td>
      <td>88</td>
    </tr>
    <tr>
      <td>Dewi Rahayu</td>
      <td>92</td>
      <td>87</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

Atribut scope pada <th>

Atribut scope memberitahu screen reader apakah <th> adalah judul untuk kolom atau baris:

<table>
  <thead>
    <tr>
      <th scope="col">Nama</th>      <!-- judul kolom -->
      <th scope="col">Senin</th>
      <th scope="col">Selasa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Matematika</th>  <!-- judul baris -->
      <td>08.00</td>
      <td>10.00</td>
    </tr>
    <tr>
      <th scope="row">Bahasa Indonesia</th>
      <td>09.00</td>
      <td>11.00</td>
    </tr>
  </tbody>
</table>

Tabel Lengkap dengan Semua Elemen

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    font-family: sans-serif;
  }

  caption {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
    color: #1e1e1e;
  }

  th, td {
    border: 1px solid #dddddd;
    padding: 12px 16px;
    text-align: left;
  }

  thead th {
    background-color: #4a9eed;
    color: white;
  }

  tbody tr:nth-child(even) {
    background-color: #f5f9ff;
  }

  tbody tr:hover {
    background-color: #dbe4ff;
  }

  tfoot td {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

<table>
  <caption>Laporan Penjualan Bulan April 2025</caption>

  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Produk</th>
      <th scope="col">Kategori</th>
      <th scope="col">Qty</th>
      <th scope="col">Harga Satuan</th>
      <th scope="col">Subtotal</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Laptop Asus</td>
      <td>Elektronik</td>
      <td>3</td>
      <td>Rp 8.000.000</td>
      <td>Rp 24.000.000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse Logitech</td>
      <td>Aksesori</td>
      <td>10</td>
      <td>Rp 150.000</td>
      <td>Rp 1.500.000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard Mechanical</td>
      <td>Aksesori</td>
      <td>5</td>
      <td>Rp 500.000</td>
      <td>Rp 2.500.000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="5">Total Keseluruhan</td>
      <td>Rp 28.000.000</td>
    </tr>
  </tfoot>
</table>

Kesalahan Umum Pemula

<!-- SALAH — td langsung di dalam table tanpa tr -->
<table>
  <td>Data</td>
</table>

<!-- SALAH — tr di dalam thead tanpa th -->
<thead>
  <tr>
    <td>Ini seharusnya th</td>
  </tr>
</thead>

<!-- BENAR -->
<table>
  <thead>
    <tr>
      <th>Judul Kolom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Isi Data</td>
    </tr>
  </tbody>
</table>

Ringkasan Tag Tabel

💡 Tips: Selalu gunakan <thead>, <tbody>, dan <tfoot> meskipun tabelnya sederhana. Kebiasaan ini membuat kode lebih rapi, semantik lebih baik, dan jauh lebih mudah di-styling dengan CSS. Ingat juga — tabel hanya untuk data tabular, bukan untuk mengatur layout halaman. 🎯