Tabel — Menampilkan Data Terstruktur

Tabel adalah cara terbaik menampilkan data tabular — data yang punya hubungan baris dan kolom.

Semantic Table HTML

<table>
  <thead>
    <tr>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ahmad</td>
      <td>[email protected]</td>
      <td>Admin</td>
    </tr>
  </tbody>
</table>

Penting:

• <thead> dan <tbody> — struktur semantik
• scope="col" — screen reader tahu ini header kolom
• scope="row" — untuk header baris

Styling Tabel

table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #E5E7EB;
  color: #6B7280;
  font-size: 0.875rem;
}
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F3F4F6;
}
tr:hover {
  background-color: #F9FAFB;
}

Tips Tabel

1. Angka rata kanan — lebih mudah membandingkan
2. Zebra striping optional — hover row biasanya cukup
3. Jangan wrap kolom penting — nama dan angka jangan terpotong
4. Header sticky — untuk tabel panjang, header tetap terlihat saat scroll

Responsive Table

Tabel sulit di mobile. Solusi:

• Horizontal scroll — bungkus dalam overflow-x: auto
• Card layout — transform baris menjadi card di mobile
• Hide kolom — sembunyikan kolom kurang penting di layar kecil

GitHub menggunakan tabel yang sangat rapi — header jelas, hover states, dan sorting yang intuitif.