LKPD 03: Tabel dengan HTML

1 Identitas Peserta Didik

Wajib Diisi

Pilih Sekolah, Kelas, dan Nama Lengkap Anda di bawah ini untuk mengaktifkan modul praktikum web.

Sekolah

Kelas / Jurusan

Nama Lengkap

2 Ringkasan Teori: Struktur Tabel dengan HTML

Dasar Web

Tabel dalam HTML digunakan untuk menyusun data dalam bentuk baris dan kolom yang terstruktur (seperti jadwal pelajaran, data grid, matriks nilai, kuitansi). Struktur utama tabel didefinisikan menggunakan tag <table> beserta elemen anak di dalamnya.

Komponen Tag & Atribut Tabel HTML

Komponen	Tag / Atribut	Fungsi Utama
Struktur Dasar	<table>, <tr>, <th>, <td>	Kerangka tabel utama, Tag pembentuk Baris (Row), Tag Header kolom, dan Tag Sel Data isi.
Tag Semantik (Grup)	<thead>, <tbody>, <tfoot>	Mengelompokkan bagian atas (Header), bagian data utama (Body), dan bagian bawah/kesimpulan (Footer).
Penggabungan Sel (Merge)	colspan, rowspan	Colspan menggabungkan sel kolom (horizontal). Rowspan menggabungkan sel baris (vertikal).

border=""

Menentukan ketebalan garis tepi tabel. Contoh: <table border="1"> untuk memunculkan garis pinggir pada tabel.

cellpadding=""

Mengatur jarak (spasi) antara konten atau teks di dalam sel dengan garis pembatas (batas sel) itu sendiri.

cellspacing=""

Mengatur jarak spasi kosong di antara satu sel dengan sel lainnya. Agar garis menyatu, gunakan nilai "0".

3 Laboratorium Simulasi Interaktif Tabel HTML

Analisis struktur kode pembentuk jadwal pelajaran dan logika layout matriks invoice.

Interactive Modules

Simulasi 1: Data Grid Jadwal

Code Editor

Klik bagian kode (baris) yang kosong pada snippet editor di bawah ini. Tentukan tag atau atribut tabel yang sesuai!

jadwal_pelajaran.html

5 </tr>

6 </thead>

7 <tbody>

8 <tr>

10 </tr>

11 </tbody>

12</table>

Klik baris kode untuk menginspeksi.

Simulasi 2: Invoice Matriks

Layout Colspan & Rowspan

Tentukan tag dan atribut penyatuan sel yang tepat untuk membuat desain tabel kuitansi / invoice secara berurutan!

1. Area Isi 2. Gabung Kolom 3. Gabung Baris 4. Footer

Langkah 1: Menyusun Area Isi

Setelah bagian header invoice (thead) dibuat, Anda ingin mengelompokkan area yang berisi daftar barang belanjaan pengguna. Tag apa yang digunakan?

Selesaikan 4 tahapan layouting.

4 Tabel Pengamatan Praktikum Tabel HTML

Rekapitulasi analisis kode jadwal dan logika layout struktur matriks.

No	Modul Simulasi	Objek / Tahapan	Analisis / Input Tag	Status Pemahaman	Aksi
Belum ada data. Klik tombol "+ Catat Analisis/Simulasi" pada modul di atas untuk menyimpan hasil.

5 Uji Kompetensi Tabel HTML

Jawablah 20 pertanyaan pilihan ganda berikut mengenai pembuatan tabel web.

20 Soal Pilihan Ganda

Petunjuk Penyelesaian:

Pastikan seluruh soal uji kompetensi dan tabel pengamatan telah terisi lengkap sebelum mengirim LKPD.