🌐 Phase 1 — HTML
P03 · Pertemuan 3 dari 20
List & Tabel
Membuat daftar terurut dan tidak terurut, nested list, serta tabel data dengan colspan dan rowspan.
Tujuan Pembelajaran
- 01Membuat unordered list <ul> dan <li>
- 02Menggunakan ordered list <ol> dengan atribut type dan start
- 03Membuat nested list (list bersarang)
- 04Membangun tabel: <table>, <tr>, <th>, <td>
- 05Menerapkan colspan dan rowspan
- 06Menggunakan caption dan scope untuk aksesibilitas tabel
Sub-topik & Materi
- 01Unordered list <ul> dan <li>
- 02Ordered list <ol> dengan atribut type dan start
- 03Nested list (list bersarang)
- 04Tabel: <table>, <tr>, <th>, <td>, <thead>, <tbody>
- 05colspan dan rowspan
- 06Atribut caption dan scope
Penjelasan Konsep
Konsep 1
Unordered List vs Ordered List
<ul> (unordered list) menghasilkan bullet point — cocok untuk daftar yang urutannya tidak penting (daftar belanja, fitur produk). <ol> (ordered list) menghasilkan nomor urut — cocok untuk langkah-langkah, ranking, atau instruksi berurutan. Setiap item list menggunakan tag <li>.
html
<!-- Unordered: urutan tidak penting --> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Ordered: urutan penting --> <ol> <li>Buka VSCode</li> <li>Buat file index.html</li> <li>Tulis kode HTML</li> </ol>
Konsep 2
Nested List (List Bersarang)
List bersarang dibuat dengan meletakkan <ul> atau <ol> BARU di dalam sebuah <li>. Ini berguna untuk membuat hierarki atau sub-kategori. Perhatikan: <ul> baru harus berada DI DALAM <li>, bukan setelah </li>.
html
<ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Backend <ul> <li>Python</li> <li>Node.js</li> </ul> </li> </ul>
Konsep 3
Anatomi Tabel HTML
Tabel HTML punya struktur: <table> sebagai pembungkus, <thead> untuk baris header, <tbody> untuk konten data, dan opsional <tfoot> untuk baris total. Setiap baris menggunakan <tr> (table row). Di dalam header gunakan <th> (table header), di data gunakan <td> (table data). <caption> memberi judul pada tabel.
html
<table> <caption>Daftar Nilai Siswa</caption> <thead> <tr> <th scope="col">Nama</th> <th scope="col">Nilai</th> <th scope="col">Grade</th> </tr> </thead> <tbody> <tr> <td>Ahmad</td> <td>85</td> <td>A</td> </tr> </tbody> </table>
Konsep 4
colspan dan rowspan
colspan="2" membuat sebuah sel melebar ke kanan menempati 2 kolom. rowspan="2" membuat sel memanjang ke bawah menempati 2 baris. Gunakan ini untuk membuat header yang mencakup beberapa kolom atau sel yang merentang beberapa baris.
html
<table border="1"> <tr> <th colspan="3">Jadwal Mingguan</th> <!-- melebar 3 kolom --> </tr> <tr> <th>Hari</th><th>Pagi</th><th>Sore</th> </tr> <tr> <td rowspan="2">Senin</td> <!-- memanjang 2 baris --> <td>HTML</td><td>CSS</td> </tr> <tr> <td>JS</td><td>Git</td> </tr> </table>
Contoh Kode Lengkap
html
<!-- Unordered List + Nested --> <ul> <li>HTML</li> <li>CSS <ul> <li>Flexbox</li> <li>Grid</li> </ul> </li> <li>JavaScript</li> </ul> <!-- Tabel dengan colspan --> <table> <caption>Jadwal Kelas Web Dev</caption> <thead> <tr><th colspan="2">Jadwal Mingguan</th></tr> <tr><th scope="col">Hari</th><th scope="col">Waktu</th></tr> </thead> <tbody> <tr><td>Senin</td><td>08:00 – 10:00</td></tr> <tr><td>Rabu</td><td>13:00 – 15:00</td></tr> </tbody> </table>
Latihan Kelas · Buat halaman berisi daftar belanja (nested list) dan tabel jadwal kelas
1
Buat unordered list daftar belanja mingguan (minimal 5 item)
2
Tambahkan nested list untuk beberapa item (sub-kategori)
3
Buat ordered list 5 langkah belajar coding
4
Buat tabel jadwal kelas dengan thead, tbody, dan colspan
5
Tambahkan caption pada tabel
Kesalahan yang Sering Dibuat
Meletakkan <ul> baru di luar </li> saat membuat nested list — harus di dalam <li>
Tidak menggunakan <thead> dan <tbody> — tabel tetap jalan tapi kurang semantik
Salah hitung colspan — jika ada 3 kolom tapi colspan="4", tabel jadi rusak tampilannya
Menggunakan tabel untuk layout halaman — tabel hanya untuk DATA tabular, bukan layout
Lupa tag <li> — menulis item langsung di dalam <ul> tanpa <li>