Section ini membahas tables dan lists sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Styling Unordered List

Reset gaya default ul dengan resep tiga deklarasi, bangun menu navigasi bersih, dan pasang ikon custom pada daftar fitur lewat ::before.

Buka → # Styling Ordered List

Pilih varian penomoran lewat list-style-type, manfaatkan atribut start dan reversed, serta gayai nomor langkah dengan ::marker.

Buka → # Properti list-style

Kuasai shorthand list-style dengan ketiga komponennya, pasang gambar SVG sebagai penanda, dan gali ::marker sampai ke content.

Buka → # Styling Table

Kenali anatomi tabel HTML, pahami tampilan default yang sempit, dan terapkan resep dasar styling tabel data yang nyaman dibaca.

Buka → # Properti table-layout

Pahami cara browser membagi lebar kolom tabel, bandingkan mode auto dan fixed, serta atur lebar kolom lewat colgroup dan col.

Buka → # Border Collapse

Pilih antara mode separate dan collapse untuk garis tabel, kuasai border-spacing, dan putuskan mana yang tepat untuk tabel datamu.

Buka → # Table Header dan Row

Manfaatkan grup thead, tbody, dan tfoot sebagai hook styling, pasang header sticky di panel gulir, dan beri state hover pada baris tabel.

Buka → # Zebra Striping

Beri latar bergantian pada baris tabel dengan tbody tr:nth-child, pahami mengapa selector harus dibatasi ke tbody, dan padukan dengan hover.

Buka → # Responsive Table

Jaga tabel tetap terbaca di layar sempit: panel gulir horizontal sebagai resep utama dan pola kartu bertumpuk berbasis data-label untuk kasus kecil.

Buka → # Overflow Table

Sempurnakan panel tabel menggulir: kolom pertama yang menempel, petunjuk gulir dari gradien, scrollbar-gutter, dan kapan sebaiknya tabel dipecah.

Buka →