Tabloların okunmasını kolaylaştırmak için, satırları değişen arka plan renkleriyle biçimlendirmek genellikle yararlıdır. Tablolara stil vermenin en yaygın yollarından biri, diğer her satırın arka plan rengini ayarlamaktır. Buna genellikle "zebra çizgileri" denir.
Bunu, diğer her satırı bir CSS sınıfıyla ayarlayarak ve ardından o sınıf için stili tanımlayarak gerçekleştirebilirsiniz. Bu işe yarar, ancak bunun için en iyi veya en etkili yol değildir. Bu yöntemi kullanırken, o tabloyu her düzenlemeniz gerektiğinde, her satırın değişikliklerle tutarlı olduğundan emin olmak için tablodaki her satırı düzenlemeniz gerekebilir. Örneğin, tablonuza yeni bir satır eklerseniz, altındaki diğer her satırın sınıfının değişmesi gerekir.
CSS zebra çizgili masaları şekillendirmeyi kolaylaştırır. Ekstra bir şey eklemenize gerek yok HTML nitelikler veya CSS sınıfları için, sadece şunu kullanırsınız: nth-of-type (n) CSS seçici.
nth-of-type (n) seçicisi, CSS'de öğelere üst ve kardeş öğelerle ilişkilerine göre stil vermenizi sağlayan yapısal bir sözde sınıftır. Kaynak sıralarına göre bir veya daha fazla öğe seçmek için kullanabilirsiniz. Başka bir deyişle, ebeveyninin belirli bir türünün n'inci çocuğu olan her öğeyle eşleşebilir.
n harfi bir anahtar kelime (tek veya çift gibi), sayı veya formül olabilir.
Örneğin, diğer tüm paragraf etiketlerine sarı arka plan rengiyle stil vermek için CSS belgeniz şunları içerir:
p: nth-of-type (tek) {
arka plan: sarı;
}
HTML Tablonuzla Başlayın
İlk olarak, normalde HTML'de yazdığınız gibi tablonuzu oluşturun. Satırlara veya sütunlara herhangi bir özel sınıf eklemeyin.
Stil sayfanıza aşağıdaki CSS'yi ekleyin:
tr: nth-of-type (tek) {
arka plan rengi:#ccc;
}
Bu, ilk satırdan başlayarak diğer her satırı gri bir arka plan rengiyle biçimlendirir.
Alternatif Sütunları Aynı Şekilde Stillendirin
Aynı tarz stili tablolarınızdaki sütunlara da uygulayabilirsiniz. Bunu yapmak için, CSS sınıfınızdaki tr'yi td olarak değiştirin. Örneğin:
td: nth-of-type (tek) {
arka plan rengi:#ccc;
}
nth-of-type (n) Seçicide Formülleri Kullanma
Seçicide kullanılan formülün sözdizimi bir+b'dir.
- a, döngü veya dizin boyutunu temsil eden bir sayıdır.
- n aslında "n" harfidir ve 0'da yıldız olan bir sayacı temsil eder.
- +, "-" de olabilen bir operatördür
- b bir tamsayıdır ve ofset değerini temsil eder - örneğin, seçicinin arka plan rengini uygulamaya başlaması gereken kaç satır aşağıdadır. Formülde bir operatör varsa bu gereklidir.
Örneğin, her 3. satır için bir arka plan rengi ayarlamak istiyorsanız, formülünüz 3n+0 olacaktır. CSS'niz şöyle görünebilir:
tr: türünün ilk örneği (3n+0) {
arka plan: arduvaz grisi;
}
N'inci Tür Seçiciyi Kullanmak İçin Yararlı Araçlar
Sözde sınıf nth-of-type seçiciyi kullanmanın formül yönü sizi biraz korkutuyorsa, şunu deneyin: nth Tester sitesi İstediğiniz görünümü elde etmek için sözdizimini tanımlamanıza yardımcı olabilecek kullanışlı bir araç olarak. nth-of-type'ı seçmek için açılır menüyü kullanın (burada nth-child gibi diğer sözde sınıfları da deneyebilirsiniz).