HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th

Pernahkah kamu melihat jadwal pelajaran di sekolah, daftar harga menu, atau data nilai siswa? Semua itu menggunakan tabel. Di HTML, tabel adalah cara terbaik untuk menyajikan data dalam bentuk baris dan kolom yang rapi.

Apa Itu Tabel di HTML?

Tabel di HTML terdiri dari baris (rows) dan kolom (columns). Setiap sel bisa berisi teks, gambar, link, atau bahkan tabel lain.

Analogi Sederhana: Tabel seperti lembar kerja Excel atau Google Sheets. Ada baris horizontal dan kolom vertikal. Setiap pertemuan antara baris dan kolom disebut sel (cell).

Struktur Dasar Tabel

Tabel HTML memiliki tiga tag utama yang wajib kamu tahu:

Tag	Kepanjangan	Fungsi
`<table>`	Table	Pembungkus seluruh tabel
`<tr>`	Table Row	Membuat baris baru dalam tabel
`<td>`	Table Data	Membuat sel data biasa (isi tabel)
`<th>`	Table Header	Membuat sel judul/header (otomatis tebal dan tengah)

Contoh Tabel Paling Sederhana

<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr> 
</table>

Hasilnya:

Baris 1, Kolom 1	Baris 1, Kolom 2
Baris 2, Kolom 1	Baris 2, Kolom 2

Catatan tentang border="1": Atribut border di <table> adalah cara lama memberi garis tepi. Sekarang lebih disarankan pakai CSS (border: 1px solid black;). Tapi untuk belajar, atribut border tetap boleh dipakai.

Menambahkan Header Tabel dengan `<th>`

<th> (Table Header) digunakan untuk judul kolom atau baris. Teks di dalam <th> otomatis menjadi tebal dan posisi tengah.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>17</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>16</td>
        <td>Bandung</td>
    </tr>
</table>

Hasilnya:

Nama	Umur	Kota
Andi	17	Jakarta
Budi	16	Bandung

Mempercantik Tabel dengan CSS

Tabel polos memang membosankan. Mari kita tambahkan CSS agar lebih menarik:

<style>
    .tabel-siswa {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }
    .tabel-siswa th,
    .tabel-siswa td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    .tabel-siswa th {
        background-color: #3b82f6;
        color: white;
        font-weight: bold;
    }
    .tabel-siswa tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    .tabel-siswa tr:hover {
        background-color: #eef2ff;
    }
</style>

<table class="tabel-siswa">
    <tr>
        <th>No</th>
        <th>Nama Siswa</th>
        <th>Nilai</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Ayu</td>
        <td>90</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bayu</td>
        <td>85</td>
    </tr>
</table>

Hasil dengan CSS:

No	Nama Siswa	Nilai
1	Ayu	90
2	Bayu	85

Penjelasan CSS di atas:

border-collapse: collapse; → menggabungkan garis tepi agar tidak dobel
padding: 12px; → memberi ruang di dalam sel
text-align: left; → rata kiri (default th adalah tengah)
background-color pada th → warna biru untuk header
tr:nth-child(even) → memberi warna abu pada baris genap (zebra striping)
tr:hover → efek saat mouse diarahkan ke baris

Studi Kasus: Daftar Harga Menu Makanan

Buat file daftar-menu.html dan praktikkan tabel:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title&gt>Daftar Menu Restoran</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #fef9e6;
        }
        .menu-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .menu-table th,
        .menu-table td {
            border: 1px solid #ddd;
            padding: 12px 15px;
        }
        .menu-table th {
            background-color: #e67e22;
            color: white;
            font-weight: bold;
            text-align: center;
        }
        .menu-table td {
            text-align: left;
        }
        .menu-table td:last-child {
            text-align: right;
            font-weight: bold;
            color: #e67e22;
        }
        .menu-table tr:hover {
            background-color: #fdebd0;
        }
        h1 {
            color: #d35400;
            text-align: center;
        }
        .keterangan {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>Daftar Menu Restoran "Sedap Rasa"</h1>

    <table class="menu-table">
        <tr>
            <th>No</th>
            <th>Nama Menu</th>
            <th>Kategori</th>
            <th>Harga</th>
        </tr>
        <tr>
            <td style="text-align: center;">1</td>
            <td>Nasi Goreng Spesial</td>
            <td>Makanan Berat</td>
            <td>Rp 25.000</td>
        </tr>
        <tr>
            <td style="text-align: center;">2</td>
            <td>Mie Goreng Jawa</td>
            <td>Makanan Berat</td>
            <td>Rp 20.000</td>
        </tr>
        <tr>
            <td style="text-align: center;">3</td>
            <td>Sate Ayam (10 tusuk)</td>
            <td>Makanan Berat</td>
            <td>Rp 30.000</td>
        </tr>
        <tr>
            <td style="text-align: center;">4</td>
            <td>Es Teh Manis</td>
            <td>Minuman</td>
            <td>Rp 5.000</td>
        </tr>
        <tr>
            <td style="text-align: center;">5</td>
            <td>Jus Alpukat</td>
            <td>Minuman</td>
            <td>Rp 12.000</td>
        </tr>
        <tr>
            <td style="text-align: center;">6</td>
            <td>Pisang Goreng</td>
            <td>Camilan</td>
            <td>Rp 10.000</td>
        </tr>
    </table>

    <div class="keterangan">
        * Harga sudah termasuk PPN 10% | ** Tersedia juga layanan pesan antar
    </div>

</body>
</html>

Menggabungkan Sel (colspan & rowspan)

Kadang kita perlu menggabungkan beberapa sel menjadi satu, seperti judul yang mencakup beberapa kolom.

`colspan` - Menggabungkan Kolom (Melebar ke Kanan)

<table border="1">
    <tr>
        <th colspan="2">Data Siswa</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Andi</td>
    </tr>
    <tr>
        <td>Kelas</td>
        <td>10 A</td>
    </tr>
</table>

Hasilnya:

Data Siswa
Nama	Andi
Kelas	10 A

`rowspan` - Menggabungkan Baris (Melebar ke Bawah)

<table border="1">
    <tr>
        <th>Nama</th>
        <td>Andi</td>
    </tr>
    <tr>
        <th rowspan="2">Kontak</th>
        <td>and@email.com</td>
    </tr>
    <tr>
        <td>08123456789</td>
    </tr>
</table>

Hasilnya:

Nama	Andi
Kontak	andi@email.com
Kontak	08123456789

Studi Kasus: Jadwal Pelajaran dengan colspan & rowspan

<!DOCTYPE html>
<html>
<head>
    <title>Jadwal Pelajaran</title>
    <style>
        .jadwal {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial;
        }
        .jadwal th, .jadwal td {
            border: 1px solid #333;
            padding: 10px;
            text-align: center;
        }
        .jadwal th {
            background-color: #3498db;
            color: white;
        }
        .istirahat {
            background-color: #f1c40f;
        }
    </style>
</head>
<body>

    <h2>Jadwal Pelajaran Kelas 10 A</h2>

    <table class="jadwal">
        <tr>
            <th>Jam</th>
            <th>Senin</th>
            <th>Selasa</th>
            <th>Rabu</th>
            <th>Kamis</th>
            <th>Jumat</th>
        </tr>
        <tr>
            <td>07:30 - 08:30</td>
            <td>Matematika</td>
            <td>Bahasa Indonesia</td>
            <td>Fisika</td>
            <td>Bahasa Inggris</td>
            <td>Olahraga</td>
        </tr>
        <tr>
            <td>08:30 - 09:30</td>
            <td>Matematika</td>
            <td>Bahasa Indonesia</td>
            <td>Fisika</td>
            <td>Bahasa Inggris</td>
            <td>Olahraga</td>
        </tr>
        <tr class="istirahat">
            <td colspan="6">Istirahat (30 menit)</td>
        </tr>
        <tr>
            <td>10:00 - 11:00</td>
            <td>Kimia</td>
            <td>Sejarah</td>
            <td>Biologi</td>
            <td>PKN</td>
            <td>Seni Budaya</td>
        </tr>
        <tr>
            <td>11:00 - 12:00</td>
            <td>Kimia</td>
            <td>Sejarah</td>
            <td>Biologi</td>
            <td>PKN</td>
            <td>Seni Budaya</td>
        </tr>
    </table>

</body>
</html>

Hasil jadwal dengan colspan: Baris istirahat menggabungkan 6 kolom menjadi satu.

Jam	Senin	Selasa	Rabu	Kamis	Jumat
07:30 - 08:30	Matematika	Bahasa Indonesia	Fisika	Bahasa Inggris	Olahraga
08:30 - 09:30	Matematika	Bahasa Indonesia	Fisika	Bahasa Inggris	Olahraga
Istirahat (30 menit)
10:00 - 11:00	Kimia	Sejarah	Biologi	PKN	Seni Budaya
11:00 - 12:00	Kimia	Sejarah	Biologi	PKN	Seni Budaya

Bagian Tambahan Tabel (thead, tbody, tfoot)

Untuk tabel yang lebih terstruktur, kita bisa membagi menjadi 3 bagian:

<thead> → bagian header (judul kolom)
<tbody> → bagian badan (isi data utama)
<tfoot> → bagian footer (biasanya untuk total/simpulan)

<table border="1">
    <thead>
        <tr>
            <th>Produk</th>
            <th>Harga</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Baju</td>
            <td>Rp 50.000</td>
        </tr>
        <tr>
            <td>Celana</td>
            <td>Rp 75.000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>Rp 125.000</td>
        </tr>
    </tfoot>
</table>

Catatan: thead, tbody, dan tfoot tidak mengubah tampilan, tapi membantu struktur kode lebih rapi dan berguna untuk CSS/javascript lanjutan.

Kesalahan Umum Pemula

Jumlah kolom tidak konsisten → Setiap baris harus punya jumlah td yang sama (kecuali pakai colspan)
Lupa menutup tag <tr> atau <td> → Tabel bisa berantakan
Terlalu banyak colspan/rowspan → Sulit dibaca dan rawan error
Tabel terlalu lebar → Bisa merusak layout di HP. Gunakan overflow-x: auto; pada pembungkus tabel
Menggunakan tabel untuk layout website → JANGAN! Tabel dulu memang dipakai untuk layout (tahun 90-an), tapi sekarang gunakan CSS Flexbox/Grid untuk layout. Tabel hanya untuk data tabular.

Peringatan Penting: Jangan pernah menggunakan tabel untuk membuat layout website (seperti navbar, sidebar, footer). Itu adalah praktik kuno dan tidak disarankan. Gunakan CSS Flexbox atau Grid untuk layout. Tabel hanya untuk menampilkan data seperti jadwal, laporan, daftar harga, dll.

Latihan Singkat

Buat file HTML baru dengan judul "Data Teman Sekelas"
Buat tabel dengan kolom: No, Nama, Usia, Hobi
Isi minimal 5 baris data temanmu
Buat header tabel menggunakan <th>
Tambahkan CSS zebra striping (baris genap warna abu-abu muda)
Tambahkan efek hover saat mouse diarahkan ke baris
Simpan dan buka di browser

Intisari Hari Ini

<table> = pembungkus tabel
<tr> = baris (table row)
<td> = sel data biasa (table data)
<th> = sel header (table header) → tebal dan tengah
colspan = gabung kolom (melebar ke kanan)
rowspan = gabung baris (melebar ke bawah)
Tabel untuk data tabular, BUKAN untuk layout website!

Tantangan Akhir Pekan: Buat sebuah tabel nilai rapor semester ini. Kolom yang harus ada: Mata Pelajaran, Nilai Tugas, Nilai UTS, Nilai UAS, Nilai Akhir. Hitung Nilai Akhir dengan rumus: (Tugas * 30% + UTS * 30% + UAS * 40%). Tambahkan baris footer untuk menampilkan Rata-rata semua mata pelajaran. Gunakan CSS untuk membuat tabel terlihat profesional. Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #8 - Membuat Daftar: Ordered List (ol), Unordered List (ul), List Item (li)
Artikel Selanjutnya: HTML Dasar #10 - Menggabungkan Sel Tabel dengan colspan dan rowspan

HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th

Apa Itu Tabel di HTML?

Struktur Dasar Tabel

Contoh Tabel Paling Sederhana

Menambahkan Header Tabel dengan `<th>`

Mempercantik Tabel dengan CSS

Studi Kasus: Daftar Harga Menu Makanan

Menggabungkan Sel (colspan & rowspan)

`colspan` - Menggabungkan Kolom (Melebar ke Kanan)

`rowspan` - Menggabungkan Baris (Melebar ke Bawah)

Studi Kasus: Jadwal Pelajaran dengan colspan & rowspan

Bagian Tambahan Tabel (thead, tbody, tfoot)

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

Categories

Main Tags

Latest Posts

Popular Posts

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th

Apa Itu Tabel di HTML?

Struktur Dasar Tabel

Contoh Tabel Paling Sederhana

Menambahkan Header Tabel dengan <th>

Mempercantik Tabel dengan CSS

Studi Kasus: Daftar Harga Menu Makanan

Menggabungkan Sel (colspan & rowspan)

colspan - Menggabungkan Kolom (Melebar ke Kanan)

rowspan - Menggabungkan Baris (Melebar ke Bawah)

Studi Kasus: Jadwal Pelajaran dengan colspan & rowspan

Bagian Tambahan Tabel (thead, tbody, tfoot)

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

Menambahkan Header Tabel dengan `<th>`

`colspan` - Menggabungkan Kolom (Melebar ke Kanan)

`rowspan` - Menggabungkan Baris (Melebar ke Bawah)