Tabel
Menyajikan data dalam baris dan kolom: table, tr, th, td, thead, tbody, tfoot, caption, serta colspan dan rowspan.
Kapan memakai tabel?
Tabel dipakai untuk menampilkan data yang punya baris dan kolom, seperti jadwal, harga, atau nilai. Jangan memakai tabel untuk mengatur tata letak halaman; itu tugas CSS.
Anatomi tabel
<table>
<tr>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>Rina</td>
<td>90</td>
</tr>
<tr>
<td>Budi</td>
<td>85</td>
</tr>
</table>| Tag | Artinya |
|---|---|
<table> | Pembungkus seluruh tabel |
<tr> | Satu baris (table row) |
<th> | Sel judul kolom/baris (header), otomatis tebal dan rata tengah |
<td> | Sel data biasa (table data) |
Bagian-bagian tabel yang rapi
Untuk tabel yang benar dan mudah di-style, kelompokkan barisnya:
<table>
<caption>Daftar Nilai Kelas A</caption>
<thead>
<tr><th>Nama</th><th>Nilai</th></tr>
</thead>
<tbody>
<tr><td>Rina</td><td>90</td></tr>
<tr><td>Budi</td><td>85</td></tr>
</tbody>
<tfoot>
<tr><td>Rata-rata</td><td>87,5</td></tr>
</tfoot>
</table><caption>: judul tabel (harus tepat setelah<table>).<thead>: kepala,<tbody>: isi,<tfoot>: ringkasan/kaki.
Menggabung sel: colspan dan rowspan
| Atribut | Fungsi |
|---|---|
colspan="2" | Sel melebar menjangkau 2 kolom |
rowspan="2" | Sel memanjang menjangkau 2 baris |
<tr>
<th colspan="2">Jadwal Senin</th>
</tr>Saat sebuah sel melebar, baris itu otomatis butuh lebih sedikit sel <td> karena sebagian ruangnya sudah terpakai.
Atribut scope untuk aksesibilitas
Pada <th> tambahkan scope="col" (judul kolom) atau scope="row" (judul baris) agar pembaca layar tahu sel data milik judul yang mana.
Tabel tampil polos karena gayanya diatur CSS (garis, warna selang-seling). Kamu akan mempelajarinya di kursus CSS.