Pada dasarnya tag <table>
jarang digunakan pada setiap halaman web yang sering dijelajahi kebanyakan orang. Tapi faktanya tabel paling sering digunakan untuk menampilkan informasi menjadi baris dan kolom.
Daftar isi:
- Table sederhana
- Menggunakan tag thead, tbody, dan tfoot
- Menggunakan atribut tabel
- Menggunakan atribut colspan dan rowspan
Table sederhana
Berikut contoh yang sederhana untuk memulai menggunakan tabel, berikut contohnya:
<table>
<tr>
<th>Buah</th>
<th>Harga</th>
<th>Diskon</th>
</tr>
<tr>
<td>Durian</td>
<td>Rp50.000,-</td>
<td>0%</td>
</tr>
<tr>
<td>Semangka</td>
<td>Rp5.000,-</td>
<td>2%</td>
</tr>
</table>
Ringkasan tag diatas:
- Tag
<table>
menentukan elemen tabel - Tag
<tr>
digunakan untuk baris tabel - Tag
<th>
menentukan judul tabel - Tag
<td>
menentukan data tabel
Tag <th>
akan menampilkan teks tebal secara bawaan, sedangkan tag <td>
akan menampilkan teks biasa.
Catatan: Jika tidak ada garis berbatasan (border) tambahkan atribut
border="1"
di tag<table>
atau baca Atribut border
Menggunakan tag thead, tbody, dan tfoot
Rasanya kurang lengkap jika tidak menggunakan tag <thead>
, <tbody>
, dan <tfoot>
, kenapa hal ini dilakukan? Karena tag tersebut memisahkan elemen seperti bagian head, body, dan foot atau (footer). Berikut contohnya:
<table>
<thead>
<tr>
<th>Buah</th>
<th>Harga</th>
<th>Diskon</th>
</tr>
</thead>
<tbody>
<tr>
<td>Durian</td>
<td>Rp50.000,-</td>
<td>0%</td>
</tr>
<tr>
<td>Semangka</td>
<td>Rp5.000,-</td>
<td>2%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Buah</th>
<th>Harga</th>
<th>Diskon</th>
</tr>
</tfoot>
</table>
Ringkasan tag diatas:
- Tag
<thead>
sekumpulan baris header di tabel - Tag
<tbody>
sekumpulan baris elemen<tr>
pada body di tabel - Tag
<tfoot>
sekumpulan baris footer di tabel
Catatan: Saya sangat jarang menggunakan tag
<tfoot>
, adapun saya menggunakannya untuk menampilkan elemen yang sama pada tag<thead>
. Perlu diketahui tag<tfoot>
bisa digunakan untuk menampilkan informasi seperti total harga atau semisalnya.
Menggunakan atribut tabel
Tabel secara bawaan memiliki beberapa atribut yang bisa Anda pelajari disini, hanya saja saya mengambil atribut yang paling umum digunakan.
Catatan: Berikut atribut yang tidak digunakan lagi, tetapi mungkin masih bisa berfungsi. Yaitu
align
,bgcolor
,border
,cellpadding
,frame
,roles
,summary
, danwidth
dikutip dari The Table element - MDN Web Docs
Contoh atribut border
Atribut border
akan memberikan garis pembatas disekeliling tabel, ini memudahkan Anda untuk melihat struktur tampilan tabel. Perlu diketahui jika nilai border
bernilai 0 maka garis pembatas tidak akan tampil, minimal bernilai 1 atau lebih. Berikut contohnya:
<table border="1">
...
</table>
Contoh atribut bgcolor
Atribut bgcolor
akan mengantikan latar belakang tabel, Anda bisa menggunakan nilai atribut ini dengan kode RGB heksadesimal 6 digit yang diawali #
atau bisa menggunakan keywords warna seperti contoh berikut ini:
<table bgcolor="whitesmoke">
...
</table>
Contoh atribut align
Atribut align
memungkinkan sebuah elemen tabel akan disejajarkan di dalam dokumen yang dimuat. Berikut nilai bawaan dari atribut align
:
-
left
: tabel ditampilkan di sisi kiri dokumen -
center
: tabel ditampilkan di sisi tengah dokumen -
right
: tabel ditampilkan di sisi kanan dokumen
Berikut contohnya:
<table align="center">
...
</table>
Menggunakan atribut colspan dan rowspan
Pada tabel HTML ada yang tidak kalah penting untuk di pelajari yaitu atribut colspan dan rowspan. Berikut definisi keduanya:
- Atribut
colspan
menentukan jumlah kolom yang akan di setel - Atribut
rowspan
menentukan jumlah baris yang akan di setel
Contoh atribut colspan
<table border="1">
<tr>
<th colspan="3">Menu</th>
</tr>
<tr>
<td>Ayam Panggang</td>
<td>Mie Ayam</td>
<td>Nasi Goreng</td>
</tr>
</table>
Contoh atribut rowspan
<table border="1">
<tr>
<th rowspan="4">Menu</th>
</tr>
<tr>
<td>Ayam Panggang</td>
</tr>
<tr>
<td>Mie Ayam</td>
</tr>
<tr>
<td>Nasi Goreng</td>
</tr>
</table>
Bonus contoh atribut colspan dan rowspan
<table border="1">
<thead>
<tr>
<th rowspan="2">Buah</th>
<th colspan="3">Jumlah</th>
<th rowspan="2">Harga</th>
</tr>
<tr>
<th>Masuk</th>
<th>Keluar</th>
<th>Sisa</th>
</tr>
</thead>
<tbody>
<tr>
<td>Durian</td>
<td>50</td>
<td>10</td>
<td>40</td>
<td>Rp50.000,-</td>
</tr>
<tr>
<td>Semangka</td>
<td>84</td>
<td>44</td>
<td>40</td>
<td>Rp5.000,-</td>
</tr>
</tbody>
</table>
Sumber: MDN Web Docs