Section Lists berakhir pada data yang tersusun dalam satu deret: item demi item tanpa arah kedua. Kebutuhan berikutnya muncul ketika setiap item membawa beberapa nilai sekaligus, misalnya daftar harga yang menyandingkan nama buah dengan harga dan satuannya. Untuk data berpola baris dan kolom seperti itu, HTML menyediakan kelompok elemen tabel dengan table sebagai wadah utamanya. Chapter ini membahas anatomi tabel serta batasan kapan tabel layak dipakai.

Kapan Tabel Menjadi Pilihan yang Tepat #

Tabel menyajikan data tabular, yaitu informasi yang maknanya baru lengkap pada persilangan baris dan kolom. Kita dapat menguji kontennya dengan tiga pertanyaan berikut:

  • Apakah setiap baris mewakili satu entitas, misalnya satu jenis buah?
  • Apakah setiap kolom memuat satu jenis informasi yang sama untuk semua entitas, misalnya harga?
  • Apakah sebuah nilai baru bermakna jika posisi baris dan kolomnya diketahui?

Jadwal kelas, laporan penjualan, dan tabel konversi satuan memenuhi ketiga syarat tersebut. Sebaliknya, langkah resep tetap milik ol dan daftar istilah tetap milik dl, karena keduanya tidak berbentuk persilangan baris dan kolom. Pendekatannya sama seperti saat kita memilih jenis list: semantik konten yang menentukan, bukan tampilan.

Tabel untuk Data, Bukan untuk Layout #

Sejarah web mencatat kebiasaan yang perlu kita waspadai. Pada akhir era 1990-an, CSS belum menyediakan cara tata letak yang andal, sehingga perancang halaman menumpuk sel tabel untuk menyusun sidebar, header, dan area konten. Halaman tampak rapi di layar, tetapi seluruh isinya berubah menjadi baris dan kolom data yang tidak nyata.

Akibatnya, pembaca layar membuka halaman lewat mode tabel dan pengunjung mendengar pengumuman kolom yang tidak nyata, sementara sel tabel tidak mengalir dengan baik pada layar sempit. Larangan modern bersifat tegas: tabel hanya untuk data tabular, sedangkan tata letak halaman ditangani CSS; pedoman W3C WAI juga menyatakan tabel bukan alat untuk layout.

Anatomi: table, tr, dan td #

Tabel dibangun oleh tiga elemen inti. Elemen table menjadi wadah seluruh tabel, elemen tr (table row) membungkus satu baris, dan elemen td (table data cell) menjadi satu sel data di dalam baris tersebut. Browser membaca tr dari atas ke bawah lalu menata td dari kiri ke kanan sehingga terbentuk kisi; jumlah sel pada sebuah baris menentukan banyaknya kolom.

Bentuk tabel paling kecil memuat satu baris berisi satu sel, dan tabel 1x1 ini tetap sah menurut spesifikasi:

html 
<table>
  <tr>
    <td>Satu baris, satu kolom</td>
  </tr>
</table>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Satu sel berisi teks "Satu baris, satu kolom"
  - Tanpa garis pembatas, karena browser tidak menambahkan
    border secara bawaan

Pola 1x1 ini jarang dipakai di dunia nyata, tetapi aturannya berlaku untuk tabel sebesar apa pun: tambah tr untuk menambah baris, tambah td untuk menambah kolom.

Contoh: Tabel Harga Buah #

Toko buah Budi menyimpan daftar harga yang tiap barisnya membawa tiga informasi: nama buah, harga, dan satuan. Simpan file berikut sebagai harga-buah.html, lalu buka di browser:

html harga-buah.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Harga Buah Toko Budi</title>
</head>
<body>
  <h1>Harga Buah Hari Ini</h1>
  <table>
    <tr>
      <td>Mangga Harum Manis</td>
      <td>Rp32.000</td>
      <td>per kilogram</td>
    </tr>
    <tr>
      <td>Jeruk Baby Pacitan</td>
      <td>Rp24.000</td>
      <td>per kilogram</td>
    </tr>
    <tr>
      <td>Pisang Cavendish</td>
      <td>Rp18.000</td>
      <td>per sisir</td>
    </tr>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Tiga baris data, masing-masing tiga kolom: nama, harga, satuan
  - Teks seluruhnya rata kiri dan tanpa garis pembatas
  - Judul "Harga Buah Hari Ini" di atas tabel

Berikut peran setiap bagian kode:

  1. Baris 10-26 (table): wadah yang memberi tahu browser bahwa isinya adalah data tabular.
  2. Baris 11-15 (tr pertama): baris pertama tabel, berisi data mangga.
  3. Baris 12-14 (tiga td): sel nama, sel harga, dan sel satuan; posisi sel inilah yang membentuk kolom pertama, kedua, dan ketiga.
  4. Baris 16-20 dan 21-25 (dua tr berikutnya): baris jeruk dan pisang dengan pola sel yang sama, sehingga ketiga kolom tetap sejajar.

Satu kelemahan masih melekat: seluruh sel memakai td, sehingga kolom harga diperlakukan sama dengan kolom nama. Pembaca manusia menebak sendiri bahwa “Rp32.000” adalah harga, sementara pembaca layar tidak memiliki petunjuk apa pun.

Contoh: Jadwal Mingguan #

Contoh kedua menegaskan arah baca dua dimensi pada jadwal mingguan Siti, yang memuat hari, rentang jam, dan nama kegiatan dalam tiga kolom:

html jadwal-mingguan.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Mingguan Siti</title>
</head>
<body>
  <h1>Jadwal Mingguan Siti</h1>
  <table>
    <tr>
      <td>Senin</td>
      <td>07.00-09.00</td>
      <td>Renang</td>
    </tr>
    <tr>
      <td>Selasa</td>
      <td>16.00-17.30</td>
      <td>Futsal</td>
    </tr>
    <tr>
      <td>Kamis</td>
      <td>19.00-20.00</td>
      <td>Les bahasa</td>
    </tr>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Tiga baris jadwal: Senin, Selasa, dan Kamis
  - Setiap baris menyandingkan hari, rentang jam, dan kegiatan

Ketika Siti menambah satu hari baru, kita cukup menambah satu tr berisi tiga td. Pertumbuhan tabel selalu berjalan per baris, dan pola itu membuat tabel mudah dibaca manusia maupun mesin.

Kedua contoh masih menyisakan satu persoalan: tidak ada sel yang menyatakan dirinya sebagai judul kolom atau baris. Chapter berikutnya memperkenalkan th, elemen yang memberi label pada sel judul sehingga tabel berhenti bergantung pada tebakan pembaca.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

harga-buah.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Harga Buah Toko Budi</title>
</head>
<body>
  <h1>Harga Buah Hari Ini</h1>
  <table>
    <tr>
      <td>Mangga Harum Manis</td>
      <td>Rp32.000</td>
      <td>per kilogram</td>
    </tr>
    <tr>
      <td>Jeruk Baby Pacitan</td>
      <td>Rp24.000</td>
      <td>per kilogram</td>
    </tr>
    <tr>
      <td>Pisang Cavendish</td>
      <td>Rp18.000</td>
      <td>per sisir</td>
    </tr>
  </table>
</body>
</html>

jadwal-mingguan.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Mingguan Siti</title>
</head>
<body>
  <h1>Jadwal Mingguan Siti</h1>
  <table>
    <tr>
      <td>Senin</td>
      <td>07.00-09.00</td>
      <td>Renang</td>
    </tr>
    <tr>
      <td>Selasa</td>
      <td>16.00-17.30</td>
      <td>Futsal</td>
    </tr>
    <tr>
      <td>Kamis</td>
      <td>19.00-20.00</td>
      <td>Les bahasa</td>
    </tr>
  </table>
</body>
</html>