How To Create A Zebra Striped Table

Denne artikel vil guide dig trin for trin i, hvordan du kan skabe en flot zebra-stribet tabel med brug af CSS. En zebra-stribet tabel er en visuel måde at differentiere rækkerne i en tabel, hvilket gør det nemt at læse og organisere data. Med CSS er det muligt at opnå dette look med et par enkle kodestumper.

1. Oprettelse af HTML-strukturen

Før vi dykker ned i CSS-delen, skal vi først oprette selve HTML-strukturen for tabellen. Her er et eksempel på, hvordan din HTML-kode kunne se ud:

Navn
Alder
By
Peter
25
København
Maria
32
Aarhus
Lars
41
Odense

I dette eksempel har vi oprettet en simpel tabel med tre kolonner og tre rækker. Du kan tilføje så mange rækker og kolonner, som du ønsker at have i din tabel.

2. CSS-styling til den stribede effekt

Nu skal vi anvende CSS-styling for at skabe den zebra-stribede effekt. Du kan enten placere koden i en ekstern CSS-fil, eller du kan tilføje det direkte i

I dette CSS-stylingstykke bruger vi pseudo-klassen:nth-child(even)til at vælge hver anden

element i vores tabel. Vi anvender såbackground-coloregenskaben for at anvende en baggrundsfarve på disse rækker. I dette tilfælde er farven #f2f2f2, men du kan ændre farven til hvad som helst, du foretrækker.

3. Implementering af CSS-koden

Nu skal vi inkludere vores CSS-kode i vores HTML-dokument. Du kan gøre dette ved at tilføje følgende linje inde i-tagget i dit HTML-dokument:

Hvis du har indsat din CSS-kode direkte i