Tabel

Jadwal bus adalah tabel: setiap sel baru bermakna jika dibaca bersama judul baris dan judul kolomnya.

Tabel untuk data

Pakai tabel saat informasinya punya baris dan kolom: jadwal, daftar harga, hasil survei. Pada akhir 1990-an banyak situs memakai tabel untuk membangun tata letak seluruh halaman, dengan menu di satu sel dan konten di sel lain. Itu menimbulkan masalah nyata. Pembaca layar mengumumkan setiap sel beserta baris dan kolomnya, sehingga tabel tata letak terdengar seperti spreadsheet yang membingungkan, dan tata letak tabel tidak menyesuaikan diri dengan baik di layar kecil. Kini tata letak dibuat dengan CSS, dan tabel dipakai untuk data.

Baris, sel, dan judul

Tabel dibangun baris demi baris. <table> membungkus semuanya, setiap <tr> (table row) adalah satu baris, dan di dalam baris setiap <td> (table data) adalah satu sel. Sel yang memberi label pada baris atau kolom memakai <th> (table header), yang secara bawaan ditampilkan browser tebal dan di tengah. Jumlah sel di setiap baris sebaiknya sama, agar kolom-kolomnya sejajar.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Buat tabel menjelaskan dirinya sendiri

Tiga tambahan mengubah kisi sel menjadi tabel yang bisa dibaca semua orang. Pertama, <caption>, ditaruh tepat setelah tag pembuka <table>, memberi tabel judul; pembaca layar mengumumkannya sebelum isinya, sehingga pendengar tahu tabel itu tentang apa. Kedua, atribut scope pada setiap <th> menyatakan apakah judul itu memberi label pada kolom (scope="col") atau baris (scope="row"). Dengan atribut ini, pembaca layar bisa membaca Rye, Price, 5.00, bukan 5.00 saja. Ketiga, <thead>, <tbody>, dan <tfoot> mengelompokkan baris judul, baris isi, dan baris total. Ketiganya memperjelas struktur, membantu CSS memberi gaya pada setiap bagian, dan memungkinkan browser mengulang judul di setiap halaman cetak tabel yang panjang.

Sel yang membentang

Sebuah sel bisa membentang melintasi beberapa kolom dengan colspan atau beberapa baris dengan rowspan. Pada jadwal mingguan, istirahat makan siang yang mencakup kelima hari kerja bisa menjadi satu sel dengan colspan="5". Saat sel membentang, baris tempatnya memerlukan lebih sedikit sel: kalau sebuah baris biasanya punya 6 sel dan salah satunya ber-colspan="5", baris itu hanya berisi 2 sel di HTML. Pakai bentangan bila memang mencerminkan datanya; tabel yang sangat rumit sulit dibaca siapa pun, jadi memecah satu tabel besar menjadi dua tabel yang lebih sederhana sering lebih baik.

Tabel yang lebar bisa menjadi masalah di ponsel. Tabel tidak bisa melipat seperti teks, jadi tabel dengan banyak kolom mungkin lebih lebar daripada layar. Perbaikan yang umum adalah membungkus tabel dengan elemen yang bisa digulir ke samping sendiri, memakai CSS, agar bagian lain halaman tidak ikut melebar.

Buat data di setiap sel sesederhana mungkin: satu nilai per sel, satuan di judul (Harga dalam euro) alih-alih diulang di setiap sel, dan tanpa sel kosong sebagai pengisi jarak. Tabel yang dibangun seperti ini lebih mudah dibacakan, lebih mudah diurutkan, dan rapi saat ditempel ke spreadsheet.