BAB 10 : TABLE (TABEL) DALAM HTML
1. Pengertian Table
Table (tabel) dalam HTML digunakan untuk menampilkan data dalam bentuk:
- Baris
- Kolom
Tabel sangat sering digunakan pada:
- Data siswa
- Data produk
- Jadwal pelajaran
- Laporan
- Dashboard admin
2. Struktur Dasar Table HTML
HTML menyediakan beberapa tag utama untuk membuat tabel.
| Tag | Fungsi |
|---|---|
<table> | Membuat tabel |
<tr> | Baris tabel |
<th> | Judul kolom |
<td> | Isi data |
3. Contoh Tabel Dasar
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Andi</td>
<td>X RPL</td>
</tr>
</table>4. Penjelasan Struktur
4.1 <table>
Tag utama pembungkus tabel.
<table>
</table>4.2 <tr> (Table Row)
Digunakan untuk membuat baris.
<tr>
</tr>4.3 <th> (Table Header)
Digunakan untuk judul kolom.
<th>Nama</th>👉 Secara default:
- Tebal
- Tengah
4.4 <td> (Table Data)
Digunakan untuk isi data.
<td>Andi</td>5. Studi Kasus Nyata : DATA SISWA
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Data Siswa</title>
</head>
<body>
<h1>Data Siswa X RPL</h1>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>X</td>
<td>RPL</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>X</td>
<td>RPL</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>X</td>
<td>RPL</td>
</tr>
</table>
</body>
</html>👉 Ini adalah contoh real yang sering digunakan di:
- Sistem sekolah
- Aplikasi absensi
- Dashboard admin
6. Studi Kasus Produk Toko Online
<h1>Daftar Produk</h1>
<table border="1">
<tr>
<th>Produk</th>
<th>Harga</th>
<th>Stok</th>
</tr>
<tr>
<td>Laptop</td>
<td>Rp7.000.000</td>
<td>10</td>
</tr>
<tr>
<td>Mouse</td>
<td>Rp150.000</td>
<td>25</td>
</tr>
</table>👉 Ini contoh real e-commerce.
7. Atribut Penting pada Table
7.1 Border
<table border="1">Menampilkan garis tabel.
7.2 Width
<table width="100%">Mengatur lebar tabel.
7.3 Cellpadding
<table cellpadding="10">Memberi jarak dalam sel.
7.4 Cellspacing
<table cellspacing="0">Mengatur jarak antar sel.
8. Menggabungkan Kolom dan Baris
8.1 Colspan
Menggabungkan kolom.
<td colspan="2">Gabung Kolom</td>Contoh:
<table border="1">
<tr>
<th colspan="2">Data Siswa</th>
</tr>
<tr>
<td>Andi</td>
<td>X RPL</td>
</tr>
</table>8.2 Rowspan
Menggabungkan baris.
<td rowspan="2">RPL</td>9. Table dengan Gambar
Contoh Produk:
<table border="1">
<tr>
<th>Foto</th>
<th>Produk</th>
</tr>
<tr>
<td>
<img src="assets/img/laptop.jpg" width="100">
</td>
<td>Laptop Gaming</td>
</tr>
</table>👉 Ini mulai mendekati website nyata 🔥
10. TABLE + LINK
<td>
<a href="detail.html">Detail</a>
</td>👉 Digunakan di dashboard admin.
11. BEST PRACTICE INDUSTRI
✔ Gunakan tabel hanya untuk data
❌ Jangan untuk layout website
✔ Gunakan <th> untuk header
✔ Gunakan data yang rapi
✔ Gunakan CSS untuk desain modern
12. KESALAHAN UMUM SISWA
❌ Salah jumlah kolom
<tr>
<td>Andi</td>
</tr>Padahal header ada 3 kolom.
❌ Tidak menutup tag
<td>Andi❌ Tabel terlalu berantakan
13. DEBUGGING TABLE
Jika tabel rusak:
- Cek jumlah kolom
- Cek tag ditutup
- Cek colspan/rowspan
- Rapikan indentasi
14. Contoh Program Lengkap (REAL PROJECT)
🎯 Sistem Data Siswa
<!DOCTYPE html>
<html>
<head>
<title>Data Siswa</title>
</head>
<body>
<h1>Data Siswa SMK</h1>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>No</th>
<th>Foto</th>
<th>Nama</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
<tr>
<td>1</td>
<td>
<img src="assets/img/siswa1.jpg" width="80">
</td>
<td>Andi</td>
<td>X RPL</td>
<td>
<a href="detail.html">Detail</a>
</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="assets/img/siswa2.jpg" width="80">
</td>
<td>Budi</td>
<td>X RPL</td>
<td>
<a href="detail.html">Detail</a>
</td>
</tr>
</table>
</body>
</html>15. LATIHAN SISWA
Latihan 1
Buat tabel:
- Nama
- Kelas
- Jurusan
Latihan 2
Buat tabel produk:
- Foto
- Nama produk
- Harga
Latihan 3
Gunakan:
- colspan
- rowspan
16. MINI PROJECT
🎯 “Dashboard Data Siswa”
Fitur:
- Tabel siswa
- Foto siswa
- Link detail
- Border rapi
- Minimal 5 data
17. KESIMPULAN
Table HTML digunakan untuk:
- Menampilkan data terstruktur
- Membuat dashboard
- Menampilkan data siswa/produk
Tag utama:
<table>
<tr>
<th>
<td>