Table Row dan Cell

Struktur dasar tabel sudah kita kenal; sebelum menambahkan fitur apa pun, kita perlu memperdalam dua anggota yang paling sering ditulis: tr yang membentuk baris dan td yang membentuk sel. Keduanya membawa aturan yang menjaga tabel tetap kokoh, plus satu fakta parser yang luput dari perhatian banyak pemula.

Chapter ini membahas aturan pasangan tr-td, masalah sel kosong, dan kelakuan browser yang diam-diam membenahi struktur tabel kita.

tr dan td Bekerja Berpasangan #

Aturannya: seluruh sel satu baris ditulis di dalam satu tr — satu baris, satu elemen. Mekanismenya: browser membaca tiap tr dari atas ke bawah; td di dalamnya tersusun dari kiri ke kanan. Sel pada posisi pertama, kedua, ketiga di tiap baris membentuk kolom pertama, kedua, ketiga.

Contoh menu Kedai Kopi Siti dengan tiga kolom — menu, porsi, harga — dan tiga baris:

<table>
  <tr>
    <td>Kopi susu</td>
    <td>Reguler</td>
    <td>Rp18.000</td>
  </tr>
  <tr>
    <td>Kopi tubruk</td>
    <td>Reguler</td>
    <td>Rp12.000</td>
  </tr>
  <tr>
    <td>Roti bakar</td>
    <td>2 potong</td>
    <td>Rp20.000</td>
  </tr>
</table>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 2–6 (<tr> pertama): satu baris dengan tiga td — menetapkan bahwa tabel ini punya tiga kolom.
2. <td> pertama tiap baris: nama menu; seluruhnya otomatis sejajar di kolom pertama tanpa perintah apa pun.
3. Dua <tr> berikutnya: masing-masing memuat tepat tiga td — jumlah sel yang sama menjaga kolom tetap lurus.

Konsistensi Jumlah Sel #

Aturan praktisnya: jumlah sel per baris idealnya konsisten. Bila satu baris kekurangan sel, kolom-kolom setelah baris itu bergeser dan tersisa ruang tanpa isi. Bila kelebihan, muncul kolom baru tanpa judul yang tidak dimaksudkan.

Bila sebuah data memang tidak ada, jangan membiarkan <td></td> kosong begitu saja. Sel kosong tampak sebagai kekosongan; lebih penting lagi, pembaca layar tidak mendapati apa pun untuk dibacakan pada sel itu, sehingga pengguna tidak bisa membedakan “data tidak ada” dari “tabel terpotong”. Trik lama mengisi   juga tidak menolong — karakter itu terbaca sebagai spasi, bukan informasi. Isilah keterangan nyata seperti “belum tersedia” atau tanda “—”; praktik lengkapnya kita bahas pada chapter Accessible Tables.

tbody yang Ditambahkan Diam-diam #

Fakta parser berikutnya menyangkut DOM yang sebenarnya terbentuk. Mari kita lihat kelakuan browser terhadap markup polos kita:

Ringkasan #

• Satu baris = satu tr; semua sel baris itu berada di dalamnya, tersusun dari kiri ke kanan.
• Jumlah sel per baris idealnya konsisten agar kolom lurus dan tidak muncul kolom liar.
• Sel kosong merepotkan pembaca layar; isi keterangan nyata atau tanda “—” alih-alih membiarkannya hampa.
• Browser selalu menambahkan tbody implisit saat kita tidak menuliskannya.

Selanjutnya kita belajar menandai sel judul dengan th — bagian tabel yang berbicara kepada browser dan pembaca layar.