Latihan 1: Tables & Data Display — UI/UX

Latihan 1 dari materi Tables & Data Display di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <table> berisi tiga baris langsung (judul Nama dan Email, lalu Ahmad dan Budi) dan blok <style> kosong. Isi barisnya biarkan sama. Rapikan jadi tabel yang semantic:

Bungkus baris judul dengan <thead>, dan dua baris data dengan <tbody>. Keduanya tetap di dalam <table>.
Beri kedua <th> atribut scope="col", karena keduanya menjuduli kolom di bawahnya.
Di <style>, tulis table { border-collapse: collapse; } supaya garis sel yang bersebelahan menyatu.

Sel data tetap <td> di dalam <tbody>.

Hint

Tabel data punya dua bagian: baris judul kolom dan baris isinya, dan keduanya dibungkus elemen yang berbeda di dalam <table>.
<thead> membungkus <tr> yang berisi <th>, <tbody> membungkus dua <tr> yang berisi <td>. Tiap <th> diberi scope dengan arah col. Garis yang menyatu diatur di elemen table, bukan di tiap sel.
<thead><tr><th scope="col">Nama</th><th scope="col">Email</th></tr></thead> <tbody> ...dua baris td... </tbody> dan table { border-collapse: collapse; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Tables & Data Display — UI/UX

Hint

Memperbarui Aplikasi