Cara Membuat Tabel HTML (Berwarna, Rowspan & Colspan)

Tabel dipakai untuk menampilkan data yang tersusun rapi dalam baris dan kolom — seperti daftar harga, jadwal, atau data siswa. Di HTML, tabel dibangun dari beberapa tag yang saling bersarang. Artikel ini membahas cara membuat tabel HTML dari dasar hingga memberi warna dan menggabung sel.

Struktur Dasar Tabel HTML

Tabel terdiri dari tag <table> (wadah), <tr> (baris), <th> (judul kolom), dan <td> (sel data):

<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
    </tr>
</table>

<th> otomatis ditampilkan tebal dan rata tengah, cocok untuk judul; <td> untuk data biasa.

Memberi Border dan Warna dengan CSS

Tanpa CSS, tabel tampil polos. Tambahkan gaya agar rapi dan menarik:

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #2563eb;
    color: white;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
</style>

border-collapse: collapse menyatukan garis border agar tidak dobel. Trik tr:nth-child(even) memberi warna selang-seling (efek zebra) agar baris mudah dibaca.

Menggabung Sel: colspan dan rowspan

colspan menggabungkan sel secara horizontal (antar kolom), rowspan secara vertikal (antar baris):

<table>
    <tr>
        <th colspan="2">Data Diri</th>
    </tr>
    <tr>
        <td rowspan="2">Foto</td>
        <td>Nama: Budi</td>
    </tr>
    <tr>
        <td>Umur: 25</td>
    </tr>
</table>

Di sini colspan="2" membuat judul membentang 2 kolom, dan rowspan="2" membuat sel Foto membentang 2 baris.

Tabel Responsif

Agar tabel lebar tidak merusak tampilan di ponsel, bungkus dengan div yang bisa digulir:

<div style="overflow-x:auto">
    <table> ... </table>
</div>

Kesalahan Umum

• Lupa border-collapse — border tampak dobel dan renggang.
• Menaruh <td> di luar <tr> — struktur tabel rusak.
• Salah hitung colspan/rowspan — jumlah sel per baris jadi tidak konsisten.
• Memakai tabel untuk tata letak halaman — gunakan CSS Flexbox/Grid; tabel hanya untuk data.

Kesimpulan

Anda telah belajar cara membuat tabel HTML dari struktur dasar, memberi warna dengan CSS, hingga menggabung sel memakai colspan dan rowspan. Ingat, tabel hanya untuk menampilkan data — untuk tata letak halaman gunakan CSS modern. Bungkus tabel lebar dengan overflow-x agar tetap rapi di ponsel.