HTML Eğitimi

HTML ANA SAYFA HTML'ye Giriş HTML Düzenleyiciler HTML Temel HTML Öğeleri HTML Özellikleri HTML Başlıkları HTML Paragrafları HTML Stilleri HTML Biçimlendirme HTML Alıntılar HTML Yorumları HTML Renkleri HTML CSS'si HTML Bağlantıları HTML Görselleri HTML Sık Kullanılan Simgesi HTML Tabloları HTML Listeleri HTML Bloğu ve Satır İçi HTML Sınıfları HTML Kimliği HTML İç Çerçeveleri HTML JavaScript'i HTML Dosya Yolları HTML Başlığı HTML Düzeni HTML Duyarlı HTML Bilgisayar Kodu HTML Semantiği HTML Stil Kılavuzu HTML Varlıkları HTML Sembolleri HTML Emojileri HTML Karakter Seti HTML URL Kodlaması HTML'ye karşı XHTML

HTML Formları

HTML Formları HTML Formu Nitelikleri HTML Form Öğeleri HTML Giriş Türleri HTML Girdi Nitelikleri HTML Giriş Formu Nitelikleri

HTML Grafikleri

HTML Kanvas HTML SVG'si

HTML Ortamı

HTML Ortamı HTML Videosu HTML Ses HTML Eklentileri HTML YouTube

HTML API'leri

HTML Coğrafi Konum HTML Sürükle/Bırak HTML Web Depolama HTML Web Çalışanları HTML ÖAM

HTML Örnekleri

HTML Örnekleri HTML Testi HTML Alıştırmaları HTML Sertifikası HTML Özeti HTML Erişilebilirliği

HTML Referansları

HTML Etiket Listesi HTML Özellikleri HTML Genel Nitelikleri HTML Tarayıcı Desteği HTML Olayları HTML Renkleri HTML Kanvas HTML Ses/Video HTML Doktipleri HTML Karakter Kümeleri HTML URL Kodlaması HTML Dil Kodları HTTP Mesajları HTTP Yöntemleri PX'den EM'ye Dönüştürücü Klavye kısayolları

HTML Tablo Stili


Tablolarınızın daha iyi görünmesi için CSS kullanın.


HTML Tablosu - Zebra Çizgileri

Her tablo satırına bir arka plan rengi eklerseniz, güzel bir zebra çizgili efekti elde edersiniz.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Diğer tüm tablo satırı öğelerine stil vermek için :nth-child(even) seçiciyi şu şekilde kullanın:

Örnek

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Not:(odd) yerine kullanırsanız (even), stil 2,4,6 vb. yerine 1,3,5 vb. satırda gerçekleşir.


HTML Tablosu - Dikey Zebra Çizgileri

Dikey zebra çizgileri oluşturmak için, diğer her satır yerine her sütuna stil verin .

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

:nth-child(even)for tablosu veri öğelerini şu şekilde ayarlayın :

Örnek

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Not: Stilin hem başlıklarda hem de normal tablo hücrelerinde olmasını istiyorsanız :nth-child()seçiciyi hem öğelerin hem de öğelerin üzerine thkoyun .td



Dikey ve Yatay Zebra Çizgilerini Birleştirin

Yukarıdaki iki örnekteki stili birleştirebilirsiniz ve her iki satırda ve her sütunda çizgiler olacaktır.

Saydam bir renk kullanırsanız, örtüşen bir efekt elde edersiniz.

                 
                 
                 
                 
                 

Rengin saydamlığını belirtmek için bir rgba()renk kullanın:

Örnek

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Yatay Bölücüler

İlk adı Soyadı tasarruf
Peter grifon 100$
Lois grifon 150 $
Joe swanson 300 $

Her tablo satırının sadece alt kısmında kenarlıklar belirtirseniz, yatay bölücülere sahip bir tablonuz olur.

border-bottomYatay bölücüler elde etmek için özelliği tüm tröğelere ekleyin :

Örnek

tr {
  border-bottom: 1px solid #ddd;
}

gezinebilir masa

Fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için :hoverseçiciyi kullanın :tr

İlk adı Soyadı tasarruf
Peter grifon 100$
Lois grifon 150 $
Joe swanson 300 $

Örnek

tr:hover {background-color: #D6EEEE;}