Miten luodaan: Zebra-muotoinen taulukko

Opi, miten luodaan zebra-muotoinen taulukko CSS:n avulla.

Zebra-muotoinen taulukko

Etunimi Sukunimi Pisteet
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Luo hienostunut viirukirjoituksinen taulukko käyttämällä :nth-child() Valitse valitsin ja lisää taustaväri kaikille parillisille (tai epäräsymmetrisille) riveille:

Esimerkki

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

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS taulukko

Viittomakirja:CSS nth-child() valitsin