Proyek: mendesain tabel

Ubah tabel polos menjadi tabel modern berbaris zebra.

Pahami konsepnya

Tabel bawaan HTML tampak datar — tanpa garis, tanpa warna, tanpa jarak. Proyek ini mengerjakannya menjadi tabel modern selangkah demi selangkah, mengumpulkan hampir semua yang sudah dipelajari: selektor, border, padding, background, dan pseudo-class.

Langkah pertama: border-collapse: collapse pada table — sel-sel yang tadinya punya garis sendiri-sendiri melebur menjadi garis tunggal yang bersih. Berikutnya border tipis pada th dan td (1px solid dengan warna lembut) plus padding 8-12px agar isi tidak menempel kaca. Kepala tabel (th) diberi background gelap dengan teks terang sehingga kolom langsung terbaca sebagai judul.

Dua sentuhan akhir yang mengangkat kelas: tr:hover mewarnai baris yang sedang disorot kursor — umpan balik halus yang memudahkan melacak baris panjang; dan tr:nth-child(even) mewarnai baris genap dengan nada lebih terang, menciptakan pola zebra yang membuat mata berpindah baris tanpa tersesat. Selesai — tabel data yang terlihat seperti komponen aplikasi sungguhan.

Coba contoh kode

table.siswa {
  border-collapse: collapse;
  width: 100%;
  font-family: sans-serif;
}

table.siswa th {
  background: #35A9DB;
  color: #fff;
}

table.siswa th,
table.siswa td {
  border: 1px solid #d5dbdf;
  padding: 10px 16px;
  text-align: center;
}

table.siswa tr:nth-child(even) {
  background: #f2f7f9;
}

table.siswa tr:hover {
  background: #dceef5;
}

Lima blok kecil, lima tugas berbeda: collapse menyatukan garis, th diwarnai, sel diberi bingkai dan ruang, nth-child(even) membuat zebra, hover menyorot baris aktif. Pasangkan dengan tabel HTML ber-th dari pelajaran tabel kursus HTML — hasilnya persis komponen tabel aplikasi modern.

Latihan singkat

Desain tabel daftar temanmu sendiri: kepala berwarna, zebra, hover, lalu tambahkan border-radius dan bayangan halus pada table-nya.