Tabel HTML
Menyajikan Data Berbentuk Tabel
Tabel digunakan untuk menyajikan data secara terstruktur dalam baris dan kolom.
1. Elemen Dasar Tabel
Tabel di HTML dibentuk menggunakan kombinasi elemen berikut:
-
<table>: Elemen pembungkus utama tabel. -
<tr>(Table Row): Menandai baris dalam tabel. -
<th>(Table Header): Sel judul kolom (teks dicetak tebal dan rata tengah secara otomatis). -
<td>(Table Data): Sel data biasa dalam tabel.
Contoh Tabel Sederhana:
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<tr>
<td>1</td>
<td>Budi Santoso</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>2</td>
<td>Siti Rahma</td>
<td>Sistem Informasi</td>
</tr>
</table>
2. Struktur Semantik Tabel (<thead>, <tbody>, <tfoot>)
Untuk tabel yang kompleks dan mendukung keterbacaan yang lebih baik, disarankan mengelompokkan baris ke dalam struktur semantik:
<table border="1">
<thead>
<tr>
<th>Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kopi Susu</td>
<td>Rp 18.000</td>
</tr>
<tr>
<td>Roti Bakar</td>
<td>Rp 15.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>Rp 33.000</th>
</tr>
</tfoot>
</table>
3. Menggabungkan Sel (colspan & rowspan)
Kadang kita perlu menggabungkan beberapa kolom atau baris menjadi satu sel.
Atribut colspan (Menggabungkan Kolom)
Menggabungkan beberapa kolom secara mendatar.
<table border="1">
<tr>
<th colspan="2">Nama Lengkap</th>
</tr>
<tr>
<td>Budi</td>
<td>Utomo</td>
</tr>
</table>
Atribut rowspan (Menggabungkan Baris)
Menggabungkan beberapa baris secara vertikal.
<table border="1">
<tr>
<th rowspan="2">Hobi</th>
<td>Membaca</td>
</tr>
<tr>
<td>Koding</td>
</tr>
</table>
