Membuat Tabel pada HTML

 

1. Pengenalan Tabel HTML

Tabel pada HTML digunakan untuk menyajikan data terstruktur dalam bentuk baris (rows) dan kolom (columns), seperti data laporan keuangan, jadwal pelajaran, daftar produk, atau perbandingan fitur.

Elemen dasar yang digunakan untuk membangun tabel HTML meliputi:

•         <table> : Elemen utama yang membungkus seluruh komponen tabel.
•       <tr> (Table Row) : Mendefinisikan baris baru di dalam tabel.
•       <th> (Table Header) : Mendefinisikan sel sebagai judul kolom/baris (secara bawaan teks dicetak tebal dan rata tengah).
•       <td> (Table Data) : Mendefinisikan sel biasa yang berisi data/konten tabel.

Contoh Kode Sederhana:

<table border="1"> <tr> <th>Nama</th> <th>Umur</th> <th>Kota</th> </tr> <tr> <td>Andi</td> <td>25</td> <td>Jakarta</td> </tr> <tr> <td>Budi</td> <td>30</td> <td>Bandung</td> </tr> </table>

 

2. Struktur Tabel Semantik (Lanjutan)

Untuk membuat tabel yang rapi, profesional, dan aksebel (*accessible* bagi *screen reader*), HTML5 menyediakan tiga elemen semantik pembagi struktur tabel:

• <thead> : Menampung bagian kepala tabel (header), berisi <tr> dan <th>.
• <tbody> : Menampung bagian utama atau isi data tabel.
• <tfoot> : Menampung bagian kaki tabel (footer), biasa digunakan untuk total, rata-rata, atau catatan kaki.

Contoh Struktur Semantik Lengkap:

<table border="1"> <thead> <tr> <th>Produk</th> <th>Jumlah</th> <th>Harga</th> </tr> </thead> <tbody> <tr> <td>Kopi Aromatic</td> <td>2</td> <td>Rp 30.000</td> </tr> <tr> <td>Teh Melati</td> <td>1</td> <td>Rp 10.000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total Pembayaran</td> <td>Rp 40.000</td> </tr> </tfoot> </table>

 

3. Menggabungkan Sel (Colspan & Rowspan)

Seringkali kita membutuhkan sel yang memuat ruang lebih dari satu kolom atau baris. Untuk mengatasi hal tersebut, HTML menyediakan dua atribut utama:

• colspan (Column Span) : Menggabungkan beberapa kolom secara horizontal (ke samping). Contoh: colspan="2" akan menggabungkan 2 kolom.
• rowspan (Row Span) : Menggabungkan beberapa baris secara vertikal (ke bawah). Contoh: rowspan="2" akan menggabungkan 2 baris.

Contoh Penggunaan Colspan & Rowspan:

<table border="1"> <!-- Contoh Colspan --> <tr> <th colspan="2">Nama Lengkap</th> </tr> <tr> <td>Nama Depan</td> <td>Nama Belakang</td> </tr> <!-- Contoh Rowspan --> <tr> <td rowspan="2">Kategori Produk</td> <td>Elektronik</td> </tr> <tr> <td>Pakaian</td> </tr> </table>

 

4. Tampilan Visual Hasil Tabel

Berikut adalah contoh bagaimana tabel di atas dirender atau ditampilkan secara konseptual:

Produk	Jumlah	Harga
Kopi Aromatic	2	Rp 30.000
Teh Melati	1	Rp 10.000
Total Pembayaran		Rp 40.000

 

5. Praktik Terbaik (Best Practices)

• Gunakan CSS untuk Tampilan Modern — Hindari menggunakan atribut HTML kuno seperti border="1", cellpadding, atau bgcolor di dalam tag HTML. Gunakan CSS (misal: border, border-collapse, padding) untuk penataan gaya yang lebih rapi dan fleksibel.
• Gunakan Tag <caption> — Sertakan tag <caption> tepat di bawah tag <table> untuk memberikan judul atau deskripsi singkat mengenai isi tabel.
• Aksesibilitas (Accessibility) — Gunakan elemen <th> serta atribut scope="col" atau scope="row" agar pembaca layar (screen reader) dapat membantu pengguna disabilitas memahami konteks data.
•  Tabel Responsif — Untuk tampilan di layar smartphone/HP, bungkus tabel dengan <div> bertipe overflow-x: auto agar tabel dapat digeser secara horizontal tanpa merusak layout halaman web.