Untuk membuat tabel lebih mudah dibaca, seringkali berguna untuk menata baris dengan warna latar belakang yang bergantian. Salah satu cara paling umum untuk menata tabel adalah dengan mengatur warna latar belakang setiap baris lainnya. Ini sering disebut sebagai "garis zebra."
Anda dapat melakukannya dengan mengatur setiap baris lainnya dengan kelas CSS dan kemudian mendefinisikan gaya untuk kelas itu. Ini berhasil tetapi bukan cara terbaik atau paling efisien untuk melakukannya. Saat menggunakan metode ini, setiap kali Anda perlu mengedit tabel itu, Anda mungkin harus mengedit setiap baris dalam tabel untuk memastikan setiap baris konsisten dengan perubahan. Misalnya, jika Anda menyisipkan baris baru ke tabel Anda, setiap baris lain di bawahnya perlu diubah kelasnya.
CSS memudahkan untuk menata tabel dengan garis-garis zebra. Anda tidak perlu menambahkan tambahan apa pun HTML atribut atau kelas CSS, Anda cukup menggunakan: nth-of-type (n) pemilih CSS.
Selector: nth-of-type (n) adalah pseudo-class struktural dalam CSS yang memungkinkan Anda untuk menata elemen berdasarkan hubungannya dengan elemen induk dan saudara kandung. Anda dapat menggunakannya untuk memilih satu atau lebih elemen berdasarkan urutan sumbernya. Dengan kata lain, ia dapat mencocokkan setiap elemen yang merupakan anak ke-n dari tipe tertentu dari induknya.
Huruf n dapat berupa kata kunci (seperti ganjil atau genap), angka, atau rumus.
Misalnya, untuk menata setiap tag paragraf lainnya dengan warna latar belakang kuning, dokumen CSS Anda akan menyertakan:
p: tipe ke-n (ganjil) {
latar belakang: kuning;
}
Mulai Dengan Tabel HTML Anda
Pertama, buat tabel Anda seperti biasa Anda menulisnya dalam HTML. Jangan menambahkan kelas khusus ke baris atau kolom.
Di stylesheet Anda, tambahkan CSS berikut:
tr: tipe ke-n (ganjil) {
warna-latar belakang:#ccc;
}
Ini akan menata setiap baris lainnya dengan warna latar belakang abu-abu yang dimulai dengan baris pertama.
Gaya Kolom Bergantian dengan Cara yang Sama
Anda dapat melakukan gaya yang sama untuk kolom di tabel Anda. Untuk melakukannya, cukup ubah tr di kelas CSS Anda menjadi td. Sebagai contoh:
td: tipe ke-n (ganjil) {
warna-latar belakang:#ccc;
}
Menggunakan Rumus dalam Pemilih tipe-n (n)
Sintaks untuk rumus yang digunakan dalam pemilih adalah an+b.
- a adalah angka yang mewakili siklus atau ukuran indeks.
- n sebenarnya adalah huruf "n" dan mewakili penghitung, yang bintangnya 0.
- + adalah operator, yang mungkin juga "-"
- b adalah bilangan bulat dan mewakili nilai offset — misalnya, berapa banyak baris ke bawah yang harus dipilih pemilih untuk mulai menerapkan warna latar belakang. Ini diperlukan jika operator disertakan dalam rumus.
Misalnya, jika Anda ingin menyetel warna latar belakang untuk setiap baris ke-3, rumus Anda akan menjadi 3n+0. CSS Anda mungkin terlihat seperti ini:
tr: tipe ke-n (3n+0) {
latar belakang: slategray;
}
Alat Bermanfaat untuk Menggunakan Selector tipe ke-n
Jika Anda merasa sedikit gentar dengan aspek formula menggunakan pemilih tipe ke-n pseudo-class, coba: situs Penguji ke-n sebagai alat yang berguna yang dapat membantu Anda menentukan sintaks untuk mencapai tampilan yang Anda inginkan. Gunakan menu tarik-turun untuk memilih tipe ke-n (Anda juga dapat bereksperimen dengan kelas semu lainnya di sini, seperti anak ke-n).