Panduan Tabel HTML Lengkap

Apa Itu Tabel HTML?

Tabel HTML adalah cara untuk menampilkan data dalam bentuk baris dan kolom yang terstruktur. Bayangkan seperti tabel di Microsoft Excel atau Google Sheets, tapi kita membuat dengan kode HTML. Tabel adalah salah satu elemen penting di dunia web untuk menyajikan data dengan rapi dan mudah dibaca.

Analogi Sederhana untuk Memahami Tabel

🎒 Tabel seperti buku daftar hadir di sekolah kamu:

• Kolom = nama siswa, tanggal, keterangan
• Baris = data setiap siswa atau setiap hari
• Pertemuan kolom dan baris = isi datanya (misalnya: "Hadir" atau "Sakit")

Kapan HARUS Menggunakan Tabel?

✓ Jadwal pelajaran - jam berapa siapa mengajar apa
✓ Daftar nilai siswa - nama siswa dan nilainya per mata pelajaran
✓ Data karyawan perusahaan - nama, jabatan, gaji, departemen
✓ Perbandingan harga produk - spesifikasi vs harga
✓ Laporan keuangan bulanan - pemasukan vs pengeluaran
✓ Daftar inventaris barang - barang apa ada berapa banyak
✓ Hasil pertandingan olahraga - tim vs skor yang didapat

4 Tag Utama Tabel HTML - Penjelasan Detail

Setiap tabel HTML pasti punya 4 tag ini. Mari kita pelajari satu per satu dengan penjelasan yang mudah:

<table>

Fungsi:

Wadah utama yang membungkus SEMUA elemen tabel

Analogi:

Seperti papan kayu yang kamu tempel di dinding untuk meletakkan foto-foto

<tr>

Fungsi:

Membuat satu baris baru di tabel

Analogi:

Seperti 1 baris di buku tulis. Jika punya 4 baris data, gunakan <tr> 4 kali

<th>

Fungsi:

Membuat JUDUL kolom (header)

Ciri khas:

Teks otomatis TEBAL, rata TENGAH, dan ada background

<td>

Fungsi:

Membuat sel untuk ISI DATA biasa

Ciri khas:

Teks NORMAL (tidak tebal), rata KIRI

Struktur Tabel - Visualisasi Hirarki

Perhatikan bagaimana tag-tag disusun dari luar ke dalam:

                            🟦 <table> ← Paling LUAR (Wadah utama)
                        
                            ├── 🟩 <tr> ← Baris 1
                        
                            │ ├─ 🟧 <th> Nama </th> (Header Kolom 1)
                        
                            │ └─ 🟧 <th> Nilai </th> (Header Kolom 2)
                        
                            ├── 🟩 <tr> ← Baris 2
                        
                            │ ├─ 🟥 <td> Andi </td> (Data 1)
                        
                            │ └─ 🟥 <td> 85 </td> (Data 2)
                        
                            └── 🟩 </tr> ← Penutup
                        
                            </table> ← Paling DALAM (Penutup)

Pertanyaan Awal untuk Diri Sendiri

Apakah setiap tabel harus punya <table>? Ya, selalu!
Berapa banyak <tr> yang dibutuhkan? Sesuai jumlah baris data
Apa bedanya <th> dan <td>? th untuk header, td untuk data

Tag Dasar - Membuat Tabel Pertama Anda

Sekarang saatnya membuat tabel pertama! Kita akan membuat tabel sederhana untuk daftar 3 siswa dengan kolom No, Nama, dan Kelas. Mari ikuti step-by-step dengan sangat detail.

Langkah-Langkah Membuat Tabel:

📍 Langkah 1: Buka tag <table> untuk memulai wadah tabel

📍 Langkah 2: Buat baris pertama untuk header (judul kolom) dengan <tr> dan <th>

📍 Langkah 3: Buat baris-baris berikutnya untuk data dengan <tr> dan <td>

📍 Langkah 4: Tutup semua dengan </table>

Kode HTML Lengkap dengan Komentar:

<table border="1">

  
  <tr>
    <th>No</th>
    <th>Nama Siswa</th>
    <th>Kelas</th>
  </tr>

  
  <tr>
    <td>1</td>
    <td>Andi Pratama</td>
    <td>XI RPL 1</td>
  </tr>

  
  <tr>
    <td>2</td>
    <td>Budi Santoso</td>
    <td>XI RPL 1</td>
  </tr>

  
  <tr>
    <td>3</td>
    <td>Citra Dewi</td>
    <td>XI RPL 2</td>
  </tr>

</table>

Hasil Tampilan di Browser:

No	Nama Siswa	Kelas
1	Andi Pratama	XI RPL 1
2	Budi Santoso	XI RPL 1
3	Citra Dewi	XI RPL 2

Penjelasan Detail Setiap Bagian Kode:

<table border="1">

Membuat WADAH tabel dengan border (garis) setebal 1 pixel. Border ini membuat pembatas antar sel terlihat jelas. Coba ganti nilai 1 dengan angka lain misalnya 3 untuk melihat garis yang lebih tebal!

<tr> ... </tr> (tr = Table Row)

Membuat SATU BARIS baru. Setiap baris data yang baru harus punya <tr> yang baru juga. Jika tabel kita punya 4 baris (1 header + 3 data), maka ada 4 <tr> total.

<th> Nama </th> (th = Table Header)

Untuk JUDUL atau HEADER kolom. Teks yang ada di <th> ini otomatis menjadi TEBAL, rata di TENGAH, dan sering punya background warna. Biasanya digunakan hanya di baris pertama (baris judul kolom).

<td> Andi </td> (td = Table Data)

Untuk ISI DATA. Teks yang ada di <td> ini NORMAL (tidak tebal), rata di KIRI. Ini adalah sel biasa yang berisi data-data kami. Digunakan di baris-baris data (bukan header).

Poin-Poin PENTING yang HARUS Diingat:

                        ✓ Jumlah kolom HARUS SAMA di setiap baris. Jika header punya 3 kolom,
                                SETIAP baris data harus punya 3 sel juga!
✓ Gunakan <th> untuk header - biasanya hanya di baris pertama
                                (judul kolom)
✓ Gunakan <td> untuk data - di baris-baris selanjutnya (isi
                                tabel)
✓ Setiap baris harus dibungkus <tr> - dari awal sampai akhir
                                baris
✓ Jangan lupa tutup semua tag dengan tanda "/" seperti </tr>,
                                </td>, </table>
✓ Indentasi kode penting - supaya kode mudah dibaca dan tidak bingung
                            

                    

Kesalahan Umum yang Harus Dihindari:

❌ SALAH - Lupa Tutup Tag:

<table border="1"> <tr> <th>Nama <td>Andi

Tag tidak ditutup, akan error!

✓ BENAR - Semua Tag Ditutup:

<table border="1"> <tr> <th>Nama</th> <td>Andi</td> </tr> </table>

Semua tag ditutup dengan benar!

❌ SALAH - Jumlah Kolom Berbeda:

<tr> <th>Nama</th> <th>Nilai</th> <th>Grade</th> </tr> <tr> <td>Andi</td> <td>85</td> </tr>

Header punya 3 kolom tapi baris data hanya 2!

✓ BENAR - Kolom Sama Banyak:

<tr> <th>Nama</th> <th>Nilai</th> <th>Grade</th> </tr> <tr> <td>Andi</td> <td>85</td> <td>B+</td> </tr>

Header dan data sama-sama 3 kolom!

Colspan - Menggabungkan Kolom Secara Horizontal

Colspan adalah cara untuk menggabungkan beberapa kolom menjadi satu sel. Dengan colspan, satu sel bisa melebar ke kanan dan menempati ruang lebih dari 1 kolom.

💡 Arti Colspan:
Col = Kolom (column)
Span = Rentang/jangkauan
Colspan = "Rentangkan kolom"

Jika colspan="3", sel itu akan selebar 3 kolom!

Kapan Menggunakan Colspan?

📌 Judul Tabel yang Panjang
"Daftar Nilai Siswa" yang memanjang di semua kolom

📌 Kategori Besar
Seperti "Semester 1" yang mencakup beberapa mata pelajaran

📌 Pesan Penting
Seperti "ISTIRAHAT" atau pemberitahuan lainnya

Contoh 1: Judul Tabel yang Lebar

<table border="1">
  <tr>
    <th colspan="3">📚 Daftar Nilai Siswa</th>
  </tr>
  <tr>
    <th>Nama</th>
    <th>Matematika</th>
    <th>B. Inggris</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

Hasil di Browser:

📚 Daftar Nilai Siswa
Nama	Matematika	B. Inggris
Andi	85	90

Contoh 2: Kategori Besar (Semester)

<table border="1">
  <tr>
    <th colspan="2">Semester 1</th>
    <th colspan="2">Semester 2</th>
  </tr>
  <tr>
    <th>Matematika</th>
    <th>B. Ing</th>
    <th>Matematika</th>
    <th>B. Ing</th>
  </tr>
</table>

Hasil di Browser:

Semester 1		Semester 2
Matematika	B. Ing	Matematika	B. Ing

Kesalahan Umum dengan Colspan:

❌ SALAH - Terlalu banyak sel:

<tr> <th colspan="3">Judul</th> <th>Kolom 1</th> <th>Kolom 2</th> <th>Kolom 3</th> </tr>

Judul colspan 3 + 3 kolom = 6 total!

✓ BENAR - Jumlah sesuai:

<tr> <th colspan="3">Judul</th> </tr> <tr> <th>Kolom 1</th> <th>Kolom 2</th> <th>Kolom 3</th> </tr>

Judul colspan 3 di baris pertama✓

Rumus Menghitung Colspan:

📐 Total kolom di 1 baris harus SELALU SAMA!
Jika colspan="3", berarti sel itu menempati ruang 3 kolom, jadi gunakan 1 sel dengan colspan=3, BUKAN 3 sel biasa.

Contoh: Jika semua baris harus punya 4 kolom:
• Baris 1: <th colspan="4"> = 4 kolom ✓
• Baris 2: <th> + <th> + <th> + <th> = 4 sel ✓
• Baris 3: <th colspan="2"> + <th colspan="2"> = 4 kolom ✓

Rowspan - Menggabungkan Baris Secara Vertikal

Rowspan adalah cara untuk menggabungkan beberapa baris menjadi satu sel. Dengan rowspan, satu sel bisa memanjang ke bawah dan menempati ruang lebih dari 1 baris.

💡 Arti Rowspan:
Row = Baris (row)
Span = Rentang/jangkauan
Rowspan = "Rentangkan baris"

Jika rowspan="2", sel itu akan setinggi 2 baris!

Kapan Menggunakan Rowspan?

📌 Nama yang Sama
Ketika satu siswa punya 2 mata pelajaran

📌 Kategori Tetap
Seperti nama kelas untuk beberapa siswa

📌 Data Duplikat
Data yang sama untuk banyak baris

Contoh: Nama Siswa yang Sama untuk 2 Mata Pelajaran

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Mata Pelajaran</th>
    <th>Nilai</th>
  </tr>

  
  <tr>
    <td rowspan="2">Andi</td>
    <td>Matematika</td>
    <td>85</td>
  </tr>

  
  <tr>
    <td>B. Inggris</td>
    <td>90</td>
  </tr>

</table>

Hasil di Browser:

Nama	Mata Pelajaran	Nilai
Andi	Matematika	85
Andi	B. Inggris	90

Poin PENTING tentang Rowspan:

                        ⚠️ PENTING: Baris yang "tertutup" oleh rowspan tidak perlu kolom itu!
                            
Contoh: Jika baris pertama punya 3 kolom dan kolom pertama pakai
                                rowspan="2", maka baris kedua hanya perlu 2 sel (bukan 3)!
Analogi: Seperti kotak yang menjulur ke bawah, kotak di bawahnya
                                "tertutup" oleh kotak atas

                    

Kesalahan Umum dengan Rowspan:

❌ SALAH - Terlalu banyak sel:

<tr> <td rowspan="2">Andi</td> <td>Matematika</td> </tr> <tr> <td>Andi</td> ← Tidak perlu! <td>B. Ing</td> </tr>

Kolom nama dobel!

✓ BENAR - Kolom rowspan tidak diulangi:

<tr> <td rowspan="2">Andi</td> <td>Matematika</td> </tr> <tr> <td>B. Ing</td> </tr>

Baris kedua hanya punya 1 sel!

Kombinasi: Colspan + Rowspan Bersama

Kadang kita perlu menggunakan colspan DAN rowspan dalam satu tabel untuk membuat struktur yang lebih kompleks. Ini adalah teknik lanjutan yang sangat berguna!

Kapan Menggabungkan Colspan + Rowspan?

📌 Jadwal Pelajaran dengan Istirahat
📌 Laporan dengan Sub-kategori
📌 Matriks Kompleks dengan Header Ganda
📌 Struktur Organisasi

Contoh: Jadwal Pelajaran dengan Istirahat

<table border="1">
  <tr>
    <th colspan="3">Jadwal Hari Senin</th>
  </tr>
  <tr>
    <th>Jam</th>
    <th>Mapel</th>
    <th>Guru</th>
  </tr>
  <tr>
    <td>07.00-08.30</td>
    <td rowspan="2">Pemrograman</td>
    <td rowspan="2">Pak Dimas</td>
  </tr>
  <tr>
    <td>08.30-10.00</td>
  </tr>
  <tr>
    <td colspan="3">🍔 ISTIRAHAT 10.00-10.15</td>
  </tr>
</table>

Hasil di Browser:

📅 Jadwal Hari Senin
Jam	Mapel	Guru
07.00-08.30	Pemrograman Web	Pak Dimas
08.30-10.00	Pemrograman Web	Pak Dimas
🍔 ISTIRAHAT 10.00-10.15

Tips PENTING untuk Kombinasi Colspan + Rowspan:

                        ✓ Hitung total kolom dengan cermat - Ingat bahwa colspan dan sel biasa
                                tetap punya total yang sama
✓ Gambar di kertas dulu - Sebelum menulis kode, gambar struktur tabel
                                di kertas
✓ Rowspan akan "menutupi" sel di bawah - Jangan lupa kurangi jumlah sel
                                di baris berikutnya
✓ Colspan akan melebar ke kanan - Sel di bawah colspan akan menjadi
                                lebih sedikit
✓ Mulai dari atas ke bawah - Hitung rowspan dari baris paling atas

                    

Panduan Hitung Kolom untuk Kombinasi:

Contoh: Tabel dengan 4 kolom total

Baris 1: colspan=2 + colspan=2 = 2+2 = 4 ✓
Baris 2: td + rowspan=2 + td + td = 1+1+1+1 = 4 ✓
Baris 3: td + (rowspan tutup) + td + td = 1+0+1+1 = 3 ✓

Studi Kasus: Tabel Nilai Siswa Kompleks

Mari kita praktik membuat tabel yang lebih kompleks menggunakan kombinasi colspan dan rowspan! Ini adalah contoh nyata yang sering ditemukan dalam dunia pendidikan.

📚 Soal Praktik:
Buatlah tabel "Nilai Ujian 2 Semester" dengan struktur:
• 1 header besar untuk judul tabel (colspan)
• Header dengan nama siswa yang span 2 baris
• Semester 1 dan Semester 2 masing-masing span 2-3 kolom
• Total kolom: 5 (No, 3 pelajaran Semester 1, 1 pelajaran Semester 2)

Solusi Kode HTML:

<table border="1">
  <tr>
    <th colspan="5">📊 Tabel Nilai Ujian 2 Semester</th>
  </tr>

  <tr>
    <th rowspan="2">Nama</th>
    <th colspan="2">Semester 1</th>
    <th colspan="2">Semester 2</th>
  </tr>

  <tr>
    <th>Matematika</th>
    <th>B.Inggris</th>
    <th>Web</th>
    <th>Linux</th>
  </tr>

  <tr>
    <td>Andi</td>
    <td>85</td>
    <td>88</td>
    <td>87</td>
    <td>89</td>
  </tr>

  <tr>
    <td>Budi</td>
    <td>90</td>
    <td>92</td>
    <td>91</td>
    <td>93</td>
  </tr>
</table>

Hasil Tampilan di Browser:

📊 Tabel Nilai Ujian 2 Semester
Nama	Semester 1		Semester 2
Nama	Matematika	B.Inggris	Web	Linux
Andi	85	88	87	89
Budi	90	92	91	93

Analisis Kode Ini:

🔍 Baris 1 (Judul):

<th colspan="5"> - Judul span 5 kolom (selebar semua)

🔍 Baris 2 (Header Ganda):

<th rowspan="2">Nama</th> - Nama span 2 baris

<th colspan="2">Semester 1</th> - Semester span 2 kolom

🔍 Baris 3 (Sub-Header):

4 kolom: Matematika, B.Inggris, Web, Linux (rowspan dari baris 2 sudah mengurus "Nama")

🔍 Baris 4-5 (Data):

Masing-masing punya 5 sel: Nama + 4 nilai

Checklist Sebelum Submit Kode:

                        ☑️ Semua tag dibuka dan ditutup dengan benar
☑️ Total kolom sama di setiap baris (hitung colspan dan rowspan)
☑️ Indentasi kode rapi agar mudah dibaca
☑️ Komentar ditambahkan untuk menjelaskan bagian penting
☑️ Sudah test di browser dan hasilnya sesuai

                    

Kuis Interaktif - Uji Pemahamanmu!

Sekarang saatnya menguji pemahaman kamu tentang tabel HTML. Jawab semua pertanyaan di bawah dengan memilih jawaban yang paling benar. Setiap jawaban akan memberikan feedback langsung!