🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

HTML — Fondasi Halaman Web
6

Tabel untuk Data Terstruktur

📖 15 menit baca 🏷️ Beginner

Tabel digunakan untuk menampilkan data dalam format baris dan kolom — seperti spreadsheet. Cocok untuk jadwal, harga, perbandingan produk, dan data statistik. Mari pelajari cara membuat tabel HTML yang terstruktur dan mudah dibaca.

📊 Tabel Dasar

Tabel HTML dibangun dari beberapa tag:

<table>

Wadah utama tabel

<tr>

Table Row — baris tabel

<th>

Table Header — judul kolom (tebal, rata tengah)

<td>

Table Data — sel data biasa

tabel-dasar.html 
<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>Sari</td>
        <td>28</td>
        <td>Bandung</td>
    </tr>
    <tr>
        <td>Andi</td>
        <td>22</td>
        <td>Surabaya</td>
    </tr>
</table>
🖥️ Preview (tanpa CSS):
Nama Umur Kota
Budi 25 Jakarta
Sari 28 Bandung
Andi 22 Surabaya

🏗️ Struktur Tabel Semantic

Untuk tabel yang lebih terstruktur, gunakan <thead>, <tbody>, dan <tfoot>:

tabel-semantic.html 
<table>
    <!-- Caption: judul tabel -->
    <caption>Daftar Harga Kursus</caption>

    <!-- Header tabel -->
    <thead>
        <tr>
            <th>Kursus</th>
            <th>Durasi</th>
            <th>Harga</th>
        </tr>
    </thead>

    <!-- Isi tabel -->
    <tbody>
        <tr>
            <td>Frontend Fundamentals</td>
            <td>8 minggu</td>
            <td>Gratis</td>
        </tr>
        <tr>
            <td>Fullstack Bootcamp</td>
            <td>12 minggu</td>
            <td>Rp 2.500.000</td>
        </tr>
        <tr>
            <td>Career Mentoring</td>
            <td>4 minggu</td>
            <td>Rp 500.000</td>
        </tr>
    </tbody>

    <!-- Footer tabel -->
    <tfoot>
        <tr>
            <td>Total</td>
            <td></td>
            <td>Rp 3.000.000</td>
        </tr>
    </tfoot>
</table>

<table>

<caption> Daftar Harga Kursus </caption>

<thead>

<tr> <th>Kursus</th> <th>Durasi</th> <th>Harga</th> </tr>

<tbody>

<tr> <td>Frontend</td> <td>8 minggu</td> <td>Gratis</td> </tr>
<tr> <td>Bootcamp</td> <td>12 minggu</td> <td>Rp 2.5jt</td> </tr>

<tfoot>

<tr> <td>Total</td> <td></td> <td>Rp 3jt</td> </tr>

</table>

<thead>

Bagian header — judul kolom. Tetap terlihat saat scroll di beberapa browser.

<tbody>

Bagian body — data utama tabel. Bisa di-scroll terpisah.

<tfoot>

Bagian footer — ringkasan/total. Muncul di akhir tabel.

🔀 Menggabungkan Sel: colspan & rowspan

Kamu bisa menggabungkan beberapa sel menjadi satu menggunakan atribut colspan (horizontal) dan rowspan (vertikal):

colspan-rowspan.html 
<table>
    <tr>
        <!-- colspan: gabung 3 kolom jadi 1 -->
        <th colspan="3">Jadwal Kelas Frontend</th>
    </tr>
    <tr>
        <th>Hari</th>
        <th>Materi</th>
        <th>Jam</th>
    </tr>
    <tr>
        <!-- rowspan: gabung 2 baris jadi 1 -->
        <td rowspan="2">Senin</td>
        <td>HTML Dasar</td>
        <td>09:00 - 11:00</td>
    </tr>
    <tr>
        <!-- Tidak perlu <td> untuk kolom Hari (sudah rowspan) -->
        <td>CSS Dasar</td>
        <td>13:00 - 15:00</td>
    </tr>
</table>
🖥️ Preview:
Jadwal Kelas Frontend
Hari Materi Jam
Senin HTML Dasar 09:00 - 11:00
CSS Dasar 13:00 - 15:00
colspan="3"

Gabung sel secara horizontal (melebar ke kanan). Angka = jumlah kolom yang digabung.

← colspan="3" →
A
B
C
rowspan="2"

Gabung sel secara vertikal (melebar ke bawah). Angka = jumlah baris yang digabung.

↕
row
span
="2"
B
C
E
F

💻 Contoh Lengkap: Tabel Perbandingan Harga

pricing.html 
<table>
    <caption>Paket Langganan FullstackTalent</caption>
    <thead>
        <tr>
            <th>Fitur</th>
            <th>Free</th>
            <th>Pro</th>
            <th>Enterprise</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Video Kursus</td>
            <td>5 video</td>
            <td>Semua</td>
            <td>Semua + Eksklusif</td>
        </tr>
        <tr>
            <td>Sertifikat</td>
            <td>—</td>
            <td>✓</td>
            <td>✓</td>
        </tr>
        <tr>
            <td>Mentoring 1-on-1</td>
            <td>—</td>
            <td>—</td>
            <td>✓</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Harga/bulan</th>
            <td>Gratis</td>
            <td>Rp 99.000</td>
            <td>Rp 299.000</td>
        </tr>
    </tfoot>
</table>
🖥️ Preview:
Paket Langganan FullstackTalent
Fitur Free Pro Enterprise
Video Kursus 5 video Semua Semua + Eksklusif
Sertifikat — ✓ ✓
Mentoring 1-on-1 — — ✓
Harga/bulan Gratis Rp 99.000 Rp 299.000

✅ Best Practices

✓

Gunakan tabel untuk data tabular saja

Jangan gunakan tabel untuk layout halaman — gunakan CSS Flexbox/Grid

✓

Selalu gunakan <thead>, <tbody>, <tfoot>

Memberikan struktur semantic yang lebih baik untuk aksesibilitas dan SEO

✓

Tambahkan <caption> untuk judul tabel

Membantu screen reader dan pengguna memahami isi tabel

✓

Gunakan <th> untuk header, bukan <td>

Browser akan membuat teks tebal dan rata tengah secara otomatis

✗

Jangan gunakan tabel untuk layout

Praktik lama (tahun 2000-an) — sekarang gunakan CSS Flexbox atau Grid

📋 Ringkasan

✓ Tabel dibangun dari: <table> → <tr> → <th>/<td>
✓ Gunakan <thead>, <tbody>, <tfoot> untuk struktur semantic
✓ colspan = gabung kolom horizontal, rowspan = gabung baris vertikal
✓ <caption> memberikan judul tabel yang baik untuk aksesibilitas
✓ Tabel hanya untuk data tabular — jangan untuk layout halaman!
List: ordered, unordered, description Form dan input untuk interaksi pengguna
📘 Intro 🎨 CSS