TablesLesson 157Preview gratis
Zebra Striped Table
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas zebra striping, yaitu pemberian warna latar berbeda pada baris tabel secara bergantian. Pola ini meningkatkan keterbacaan tabel panjang dengan membantu mata melacak baris. CSS menyediakan selector nth-child sehingga warna dapat diterapkan tanpa menambahkan kelas pada setiap baris.
Poin kunci
- Gunakan selector nth-child(even) atau nth-child(odd) pada baris tbody
- Batasi selector ke tbody agar baris header tidak ikut berwarna
- Tambahkan efek hover untuk membantu pengguna menandai baris yang sedang dibaca
- Pastikan kontras warna cukup dan jangan mengandalkan warna saja untuk menyampaikan informasi
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.