Laporan Project Best Learning Wardah Inspiring Teacher Gen 8 Belajar Koding Dengan Gembira

Pada tahap Penenun Aksi dari kegiatan Wardah Inspiring Teacher Gen 8 tugas akhir dalam kegiatan ini yaitu mempraktikkan Rencana Project Best Learning yang telah disusun sejak 3 bulan yang lalu. Saya melaksanakan PjBL bersama siswa kelas 8A yang saya beri judul Belajar Koding dengan GEMBIRA (GEMini, iBIspaint, ScRAtch). Berikut ini laporan PjBL yang saya share dalam bentuk carousel di Instagram rita_pinang. 

Continue reading Laporan Project Best Learning Wardah Inspiring Teacher Gen 8 Belajar Koding Dengan Gembira

Membuat Tabel pada HTML

 

1. Pengenalan Tabel HTML

Tabel pada HTML digunakan untuk menyajikan data terstruktur dalam bentuk baris (rows) dan kolom (columns), seperti data laporan keuangan, jadwal pelajaran, daftar produk, atau perbandingan fitur.

Elemen dasar yang digunakan untuk membangun tabel HTML meliputi:

•         <table> : Elemen utama yang membungkus seluruh komponen tabel.
•       <tr> (Table Row) : Mendefinisikan baris baru di dalam tabel.
•       <th> (Table Header) : Mendefinisikan sel sebagai judul kolom/baris (secara bawaan teks dicetak tebal dan rata tengah).
•       <td> (Table Data) : Mendefinisikan sel biasa yang berisi data/konten tabel.

Contoh Kode Sederhana:

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

 

2. Struktur Tabel Semantik (Lanjutan)

Untuk membuat tabel yang rapi, profesional, dan aksebel (*accessible* bagi *screen reader*), HTML5 menyediakan tiga elemen semantik pembagi struktur tabel:

• <thead> : Menampung bagian kepala tabel (header), berisi <tr> dan <th>.
• <tbody> : Menampung bagian utama atau isi data tabel.
• <tfoot> : Menampung bagian kaki tabel (footer), biasa digunakan untuk total, rata-rata, atau catatan kaki.

Contoh Struktur Semantik Lengkap:

<table border="1"> <thead> <tr> <th>Produk</th> <th>Jumlah</th> <th>Harga</th> </tr> </thead> <tbody> <tr> <td>Kopi Aromatic</td> <td>2</td> <td>Rp 30.000</td> </tr> <tr> <td>Teh Melati</td> <td>1</td> <td>Rp 10.000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total Pembayaran</td> <td>Rp 40.000</td> </tr> </tfoot> </table>

 

3. Menggabungkan Sel (Colspan & Rowspan)

Seringkali kita membutuhkan sel yang memuat ruang lebih dari satu kolom atau baris. Untuk mengatasi hal tersebut, HTML menyediakan dua atribut utama:

• colspan (Column Span) : Menggabungkan beberapa kolom secara horizontal (ke samping). Contoh: colspan="2" akan menggabungkan 2 kolom.
• rowspan (Row Span) : Menggabungkan beberapa baris secara vertikal (ke bawah). Contoh: rowspan="2" akan menggabungkan 2 baris.

Contoh Penggunaan Colspan & Rowspan:

<table border="1"> <!-- Contoh Colspan --> <tr> <th colspan="2">Nama Lengkap</th> </tr> <tr> <td>Nama Depan</td> <td>Nama Belakang</td> </tr> <!-- Contoh Rowspan --> <tr> <td rowspan="2">Kategori Produk</td> <td>Elektronik</td> </tr> <tr> <td>Pakaian</td> </tr> </table>

 

4. Tampilan Visual Hasil Tabel

Berikut adalah contoh bagaimana tabel di atas dirender atau ditampilkan secara konseptual:

Produk	Jumlah	Harga
Kopi Aromatic	2	Rp 30.000
Teh Melati	1	Rp 10.000
Total Pembayaran		Rp 40.000

 

5. Praktik Terbaik (Best Practices)

• Gunakan CSS untuk Tampilan Modern — Hindari menggunakan atribut HTML kuno seperti border="1", cellpadding, atau bgcolor di dalam tag HTML. Gunakan CSS (misal: border, border-collapse, padding) untuk penataan gaya yang lebih rapi dan fleksibel.
• Gunakan Tag <caption> — Sertakan tag <caption> tepat di bawah tag <table> untuk memberikan judul atau deskripsi singkat mengenai isi tabel.
• Aksesibilitas (Accessibility) — Gunakan elemen <th> serta atribut scope="col" atau scope="row" agar pembaca layar (screen reader) dapat membantu pengguna disabilitas memahami konteks data.
•  Tabel Responsif — Untuk tampilan di layar smartphone/HP, bungkus tabel dengan <div> bertipe overflow-x: auto agar tabel dapat digeser secara horizontal tanpa merusak layout halaman web.

Continue reading Membuat Tabel pada HTML

Perjalanan MPI 2026 Tim Spenduyo

 

Ada yang istimewa dalam Workshop Pembuatan Media Pembelajaran Interaktif (MPI) Jenjang SMP Tahun 2026 yang diselenggarakan oleh Kemendikdasmen. Dari 2.377 sekolah SMP di seluruh Indonesia yang mendaftar, kami dari Tim Smp Negeri Dua Mendoyo sangat bersyukur dan bisa terpilih menjadi 1 dari 350 sekolah yang dinyatakan lolos seleksi rancangan storyboard.

Seleksi diselenggarakan pada bulan Maret dimana 1 sekolah  hanya mengirim 1 tim yang terdiri dari guru dan operator. Kebetulan disekolah saya merangkap jabatan sebagai Operator sehingga saya mendaftarkan diri bersama rekan guru Matematika. Setelah membuat rancangan story board untuk  seleksi workshop. Sebulan kemudian nama-nama peserta yang lolos di umumkan.

Tahap selanjutnya kami belajar secara mandiri melalui LMS selama sebulan  tahap selanjutnya revisi storyboard. Bulan Juli  seluruh peserta sedang melangkah ke tahap selanjutnya Pra Workshop dan workshop di bulan Agustus Pelatihan Pembuatan MPI yang natinya akan di publish pada platform Rumah Pendidikan (Ruang Murid).

Mohon doa dan dukungannya dari seluruh masyaratat terutama keluarga besar SMP Negeri 2 Mendoyo semoga seluruh proses pelatihan berjalan lancar, serta karya yang dihasilkan dapat lolos kurasi, uji publik, dan bermanfaat bagi pembelajaran murid-murid di seluruh Indonesia.

MPI 2026

Berkarya Untuk Negeri Melalui Digigitalisasi Pembelajaran Inovatif Berdampak

 

Continue reading Perjalanan MPI 2026 Tim Spenduyo