Cara Membuat Table HTML untuk Pemula (Lengkap + Contoh)

Table HTML adalah elemen penting dalam pengembangan website yang digunakan untuk menampilkan data dalam bentuk baris dan kolom secara terstruktur.

Biasanya, tabel digunakan untuk menampilkan informasi seperti:

• Data statistik
• Jadwal kegiatan
• Daftar harga
• Informasi terstruktur lainnya

Dengan memahami cara membuat table HTML, kamu bisa menyajikan data yang lebih rapi, informatif, dan mudah dipahami.

Struktur Dasar Table HTML

Dalam HTML, tabel dibuat menggunakan beberapa elemen utama berikut:

• <table> → membungkus seluruh tabel
• <tr> → membuat baris
• <th> → header (judul kolom)
• <td> → isi data

Contoh Dasar Table HTML

<table>
    <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>Surabaya</td>
    </tr>
</table>

Dengan struktur ini, kamu sudah bisa membuat tabel sederhana.

Menambahkan Border pada Tabel

Agar tabel lebih mudah dibaca, kamu bisa menambahkan garis pembatas menggunakan atribut border.

Contoh:

<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>
</table>

Tips: Untuk desain modern, sebaiknya gunakan CSS, bukan atribut border.

Menggabungkan Sel (Colspan & Rowspan)

Dalam kondisi tertentu, kamu perlu menggabungkan beberapa sel.

1. Colspan (Gabung Horizontal)

Digunakan untuk menggabungkan kolom ke samping.

<table border="1">
    <tr>
        <th colspan="2">Nama Lengkap</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>Setiawan</td>
        <td>25</td>
    </tr>
</table>

2. Rowspan (Gabung Vertikal)

Digunakan untuk menggabungkan baris ke bawah.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td rowspan="2">Budi</td>
        <td>30</td>
    </tr>
    <tr>
        <td>32</td>
    </tr>
</table>

Membagi Struktur Tabel (thead, tbody, tfoot)

Untuk membuat tabel lebih rapi dan profesional, gunakan pembagian struktur berikut:

• <thead> → bagian header
• <tbody> → isi utama
• <tfoot> → bagian footer

Contoh Lengkap:

<table border="1">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
            <th>Kota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Andi</td>
            <td>25</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>30</td>
            <td>Surabaya</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Data terakhir di-update: Agustus 2024</td>
        </tr>
    </tfoot>
</table>

Tips Membuat Table HTML yang Baik

Agar tabel terlihat profesional dan nyaman dibaca:

• Gunakan CSS untuk styling (bukan atribut lama)
• Jangan terlalu banyak kolom
• Gunakan header yang jelas
• Pastikan tabel responsif di mobile

Kesimpulan

Table HTML adalah cara efektif untuk menampilkan data secara terstruktur. Dengan memahami elemen dasar seperti <tr>, <th>, dan <td>, serta penggunaan rowspan dan colspan, kamu bisa membuat tabel yang lebih fleksibel dan informatif.

Bagi pemula, menguasai table HTML adalah langkah penting untuk memahami dasar pembuatan website secara lebih mendalam.