Home Link & Gambar Tabel HTML

Tabel dalam HTML

30 menit Pemula - Menengah Dasar HTML

Pelajari cara membuat dan memformat tabel HTML untuk menampilkan data terstruktur dengan aksesibilitas dan semantik yang tepat.

Dasar-dasar Tabel HTML

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom yang terstruktur. Memahami struktur dasar tabel sangat penting untuk membuat data yang mudah dibaca dan diakses.

Anatomi Tabel HTML

<table>

Container utama tabel

<tr>

Table Row (Baris)

<th>

Table Header (Header)

<td>

Table Data (Sel Data)

📊 Contoh Tabel Sederhana

<table>
    <tr>
        <th>Nama</th>
        <th>Usia</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi Wijaya</td>
        <td>25</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>Sari Dewi</td>
        <td>28</td>
        <td>Bandung</td>
    </tr>
    <tr>
        <td>Budi Santoso</td>
        <td>32</td>
        <td>Surabaya</td>
    </tr>
</table>
tabel-sederhana.html
Nama Usia Kota
Andi Wijaya 25 Jakarta
Sari Dewi 28 Bandung
Budi Santoso 32 Surabaya

Elemen Tabel Lanjutan

HTML menyediakan elemen-elemen semantik untuk mengorganisir tabel dengan lebih baik dan meningkatkan aksesibilitas.

<thead>

Kelompok header tabel. Penting untuk styling dan aksesibilitas.

<thead>...</thead>

<tbody>

Kelompok isi tabel utama. Dapat berisi banyak baris data.

<tbody>...</tbody>

<tfoot>

Kelompok footer tabel untuk summary, total, atau catatan.

<tfoot>...</tfoot>

<caption>

Judul atau deskripsi tabel. Muncul di atas atau bawah tabel.

<caption>...</caption>

Menggabungkan Sel: Colspan & Rowspan

Colspan (Menggabungkan Kolom)

<table>
    <tr>
        <th colspan="2">Nama Lengkap</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>Wijaya</td>
        <td>25</td>
    </tr>
</table>
Nama Lengkap Usia
Andi Wijaya 25

Rowspan (Menggabungkan Baris)

<table>
    <tr>
        <th rowspan="2">Kategori</th>
        <th>Produk A</th>
    </tr>
    <tr>
        <td>Produk B</td>
    </tr>
</table>
Kategori Produk A
Produk B

Atribut Tabel

Atribut tabel membantu mengontrol tampilan dan perilaku tabel. Namun, banyak atribut presentasional sudah deprecated dalam HTML5 - gunakan CSS sebagai gantinya.

colspan Valid

Jumlah kolom yang akan digabungkan secara horizontal.

colspan="2" colspan="3"
rowspan Valid

Jumlah baris yang akan digabungkan secara vertikal.

rowspan="2" rowspan="3"
headers Aksesibilitas

Mengaitkan sel data dengan header untuk aksesibilitas.

headers="col1 col2"
border Deprecated

Ketebalan border tabel. Gunakan CSS: border

border="1"
cellpadding Deprecated

Jarak antara konten dan border sel. Gunakan CSS: padding

cellpadding="5"
cellspacing Deprecated

Jarak antar sel. Gunakan CSS: border-spacing

cellspacing="0"

Contoh Tabel Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laporan Nilai Siswa</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-family: Arial, sans-serif;
        }
        
        caption {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        
        tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        tbody tr:hover {
            background-color: #e3f2fd;
        }
        
        tfoot {
            background-color: #34495e;
            color: white;
            font-weight: bold;
        }
        
        .highlight {
            background-color: #fff3cd;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <caption>Laporan Nilai Semester 1 - Kelas 10A</caption>
        
        <thead>
            <tr>
                <th rowspan="2">No</th>
                <th rowspan="2">Nama Siswa</th>
                <th colspan="3">Mata Pelajaran</th>
                <th rowspan="2">Rata-rata</th>
            </tr>
            <tr>
                <th>Matematika</th>
                <th>Bahasa Indonesia</th>
                <th>IPA</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
                <td>Andi Wijaya</td>
                <td>85</td>
                <td>90</td>
                <td>88</td>
                <td>87.7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Sari Dewi</td>
                <td>92</td>
                <td>88</td>
                <td>95</td>
                <td class="highlight">91.7</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Budi Santoso</td>
                <td>78</td>
                <td>82</td>
                <td>80</td>
                <td>80.0</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Citra Lestari</td>
                <td>88</td>
                <td>85</td>
                <td>90</td>
                <td>87.7</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td colspan="2">Rata-rata Kelas</td>
                <td>85.8</td>
                <td>86.3</td>
                <td>88.3</td>
                <td class="highlight">86.8</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
laporan-nilai.html
Laporan Nilai Semester 1 - Kelas 10A
No Nama Siswa Mata Pelajaran Rata-rata
Matematika Bahasa Indonesia IPA
1 Andi Wijaya 85 90 88 87.7
2 Sari Dewi 92 88 95 91.7
3 Budi Santoso 78 82 80 80.0
4 Citra Lestari 88 85 90 87.7
Rata-rata Kelas 85.8 86.3 88.3 86.8

Visualisasi Struktur Tabel:

<table>
<caption>
<thead>
<tr> (Header utama)
<tr> (Sub-header)
<tbody>
<tr> (Data baris 1)
<tr> (Data baris 2)
<tr> (Data baris 3)
<tr> (Data baris 4)
<tfoot>
<tr> (Footer)

Best Practices

Gunakan Elemen Semantik

Selalu gunakan <thead>, <tbody>, <tfoot> untuk struktur yang jelas dan aksesibilitas.

Tambahkan Caption

Caption membantu memahami konteks tabel dan penting untuk aksesibilitas.

Hindari Layout dengan Tabel

Jangan gunakan tabel untuk layout halaman. Gunakan CSS Grid atau Flexbox.

Gunakan CSS untuk Styling

Hindari atribut deprecated seperti border, cellpadding. Gunakan CSS modern.

Latihan Praktik

Buat Jadwal Pelajaran

Menengah

🎯 Tujuan Pembelajaran:

Membuat tabel kompleks dengan struktur semantik yang benar, menggunakan colspan/rowspan, dan menerapkan styling dasar dengan CSS.

📋 Requirements:

Struktur lengkap (thead, tbody, tfoot)
Minimal 1 colspan dan 1 rowspan
Caption deskriptif
Styling dasar dengan CSS
Responsive design
Aksesibilitas dengan scope atribut

💡 Contoh Tema:

  • Jadwal Pelajaran - Dengan hari dan jam
  • Data Karyawan - Dengan departemen dan posisi
  • Laporan Keuangan - Dengan kategori dan total
  • Inventory Barang - Dengan kategori dan stok
Sebelumnya: Link & Gambar Selanjutnya: Form