proyektabeljadwalMahir3 mnt baca

Proyek Mini: Jadwal Mingguan

Rangkai semua ilmu tabel: jadwal mingguan aksesibel dan responsif.

Kenapa Menggabungkan Ilmu Itu Penting

Selama tiga modul terakhir kamu belajar tabel sepotong-sepotong: struktur dasar, thead/tbody/tfoot, lalu colspan/rowspan. Di dunia nyata tidak ada yang menyuruhmu bikin "colspan saja". Klien atau gurumu menyuruhmu bikin jadwal, dan kamu harus menarik semua potongan ilmu itu sekaligus dari kepalamu. Proyek mini ini melatih otot itu: mengubah pengetahuan yang terpisah-pisah menjadi satu halaman yang utuh dan benar.

Jadwal mingguan adalah tabel paling jujur: judul resmi, header kolom, header baris, sel istirahat yang digabung, dan harus tetap enak dibaca di layar HP yang sempit.

Langkah demi Langkah

Langkah 1: Tabel dan caption. Mulai dengan tag table dan beri caption "Jadwal Mingguan". Caption adalah judul resmi tabel yang dibacakan pembaca layar sebelum isinya, jadi jangan menggantinya dengan heading biasa di luar tabel.

Langkah 2: Kepala kolom di thead. Baris pertama berisi th dengan scope="col": Hari, 07.00, 08.00, 09.00. Atribut scope memberi tahu teknologi asistif bahwa sel ini adalah judul kolom di bawahnya, bukan sekadar teks tebal.

Langkah 3: Isi baris di tbody dengan scope="row". Buat lima baris Senin sampai Jumat. Nama hari ditulis sebagai th scope="row" karena ia judul barisnya, bukan data biasa. Detail kecil inilah yang membedakan tabel asal jadi dari tabel yang benar-benar aksesibel.

Langkah 4: Gabungkan sel istirahat dengan colspan. Satu baris, misalnya Rabu, hanya berisi "Istirahat" yang membentang selebar tiga kolom jam, jadi pakai colspan="3". Rumusnya: colspan sama dengan jumlah kolom yang digantikan, dan baris itu tetap butuh th nama hari.

Langkah 5: Bungkus agar responsif. Tabel empat kolom akan terpotong di layar HP. Bungkus seluruh table dalam div ber-style="overflow-x: auto;" supaya tabel bisa digeser ke samping tanpa merusak layout halaman.

Kode Kerangka

Mulai dari kerangka ini, lalu lengkapi bagian yang kosong:

html

<div style="overflow-x: auto;">
  <table border="1">
    <caption>Jadwal Mingguan</caption>
    <thead>
      <tr>
        <th scope="col">Hari</th>
        <th scope="col">07.00</th>
      </tr>
    </thead>
    <tbody>
      <!-- tambah baris Senin sampai Jumat di sini -->
    </tbody>
  </table>
</div>

Polanya: caption dulu, thead untuk judul kolom, tbody untuk data.

Kode Hasil

Jadwal lengkap dengan lima hari, tiga kolom jam, dan satu baris istirahat yang digabung:

html

<div style="overflow-x: auto;">
  <table border="1">
    <caption>Jadwal Mingguan</caption>
    <thead>
      <tr>
        <th scope="col">Hari</th>
        <th scope="col">07.00</th>
        <th scope="col">08.00</th>
        <th scope="col">09.00</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Senin</th>
        <td>MTK</td>
        <td>IPA</td>
        <td>IPS</td>
      </tr>
      <tr>
        <th scope="row">Rabu</th>
        <td colspan="3">Istirahat</td>
      </tr>
    </tbody>
  </table>
</div>

Bandingkan dengan kerangka tadi: kolom 08.00 dan 09.00 ditambahkan, baris Senin terisi penuh, dan baris Rabu memakai colspan="3" di tiga kolom jamnya.

Jebakan Umum

Salah: menulis nama hari dengan td biasa lalu menebalkannya. Terlihat sama di layar, tapi pembaca layar tidak tahu itu judul baris. Benar: pakai th scope="row" untuk nama hari.

Salah: memberi colspan="4" pada sel istirahat karena ikut menghitung kolom Hari. Hasilnya sel kelebihan lebar dan tabel berantakan. Benar: colspan="3", hanya menggantikan tiga kolom jam, sedangkan kolom Hari tetap diisi th.

Salah: lupa membungkus tabel dengan div overflow-x, sehingga tabel terpotong di HP dan tidak bisa digeser. Benar: selalu bungkus tabel yang lebar dalam div scroll horizontal.

Salah: menaruh caption di luar table atau menggantinya dengan h2. Benar: caption selalu menjadi anak pertama di dalam table.

Catatan teknis: Ini pola tabel "produksi" yang benar: aksesibel (scope + caption), rapi (thead/tbody), dan responsif (wrapper). Tiga modul tabel sebelumnya menyatu di sini, dan pola inilah yang kamu pakai di proyek nyata.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Lengkapi 5 Hari

Playground baru berisi 2 hari. Lengkapi menjadi Senin-Jumat (5 baris), tambah kolom 09.00, dan beri satu baris "Istirahat" dengan colspan yang benar. Melengkapi tabel yang sudah ada melatih kebiasaan membaca dan memperbaiki kode tanpa merusak bagian yang sudah benar.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Jadwal</title>
</head>
<body>
  <div style="overflow-x: auto;">
    <table border="1">
      <caption>Jadwal</caption>
      <thead>
        <tr><th scope="col">Hari</th><th scope="col">07.00</th><th scope="col">08.00</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Senin</th><td>MTK</td><td>IPA</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Open Sandbox