Tabel itu cara paling efektif nampilin data dalam format baris dan kolom. Sering dipake buat daftar siswa, jadwal, harga produk, atau data apapun yang butuh struktur.

1. Tabel Paling Simple

<table>
    <tr>
        <th>Nama</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>Andika</td>
        <td>28</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
    </tr>
</table>

Elemen Tabel

• <table> → Container tabel
• <tr> → Table row (baris)
• <th> → Table header (judul kolom, biasanya tebal)
• <td> → Table data (isi cell)

---

2. Struktur Lengkap — Thead, Tbody, Tfoot

Supaya lebih rapi dan semantik, tabel bisa dibagi tiga bagian:

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>Email</th>
            <th>Kota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Andika</td>
            <td>[email protected]</td>
            <td>Batam</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>[email protected]</td>
            <td>Jakarta</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 orang</td>
        </tr>
    </tfoot>
</table>

• <thead> → Header tabel
• <tbody> → Body (isi) tabel
• <tfoot> → Footer tabel

---

3. Colspan & Rowspan — Gabung Cell

Colspan — Gabung Kolom

<table border="1">
    <tr>
        <th colspan="2">Informasi Pribadi</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Andika</td>
    </tr>
</table>

colspan="2" artinya cell itu menempati 2 kolom.

Rowspan — Gabung Baris

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Mata Kuliah</th>
        <th>Nilai</th>
    </tr>
    <tr>
        <td rowspan="2">Andika</td>
        <td>Matematika</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Bahasa</td>
        <td>85</td>
    </tr>
</table>

rowspan="2" artinya cell itu menempati 2 baris.

---

4. Caption — Judul Tabel

<table>
    <caption>Data Siswa Kelas XII</caption>
    <thead>
        <tr>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Andika</td>
            <td>XII IPA 1</td>
        </tr>
    </tbody>
</table>

<caption> kasih judul di atas tabel. Bagus buat SEO dan aksesibilitas.

---

5. Tabel Responsif — biar Gak Berantakan di HP

Cara 1: Overflow Scroll

<style>
    .table-responsive {
        overflow-x: auto;
    }
</style>

<div class="table-responsive">
    <table>
        <!-- isi tabel -->
    </table>
</div>

Kalau tabel kelebaran di HP, muncul scrollbar horizontal.

Cara 2: Block Display (Mobile Friendly)

<style>
    @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        
        thead {
            display: none;
        }
        
        td {
            border: 1px solid #ddd;
            margin-bottom: 5px;
        }
        
        td::before {
            content: attr(data-label);
            font-weight: bold;
        }
    }
</style>

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Nama">Andika</td>
            <td data-label="Email">[email protected]</td>
        </tr>
    </tbody>
</table>

Di HP, tabel berubah jadi card layout — lebih rapi dan mudah dibaca.

---

6. Contoh Tabel dengan CSS

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel HTML</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <h1>Data Siswa</h1>
    
    <table>
        <caption>Daftar Siswa Kelas XII</caption>
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kelas</th>
                <th>Nilai</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andika Rekatias</td>
                <td>XII IPA 1</td>
                <td>90</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi Santoso</td>
                <td>XII IPA 2</td>
                <td>85</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">Rata-rata: 87.5</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

---

7. Recap

Elemen	Fungsi	Atribut
<table>	Container tabel	border
<thead>	Header group	-
<tbody>	Body group	-
<tfoot>	Footer group	-
<tr>	Table row	-
<th>	Header cell	colspan, rowspan
<td>	Data cell	colspan, rowspan
<caption>	Judul tabel	-

---

Penutup

Tabel itu simpel tapi powerful. Yang perlu diingat:

• Pakai <thead>, <tbody>, <tfoot> buat struktur semantik
• Pakai colspan dan rowspan kalau butuh gabung cell
• Bikin responsif supaya gak berantakan di HP

Di artikel selanjutnya, kita bahas Form & Input — cara bikin form pendaftaran, login, dan input berbagai jenis.

---