Hvordan lage Alternerende bakgrunnsfarger i tabellrader med CSS

I større tabeller er det ofte et hjelpemiddel til å lese for å ha vekslende bakgrunnsfarger for annenhver rad i tabellen. Det kan hjelpe leserne følge linjer over bordet. Det er lett å implementere med CSS. Her er hvordan.

Bruksanvisning

1 Hvordan lage Alternerende bakgrunnsfarger i tabellrader med CSS

Her er en enkel tabell med vekslende grå og hvite rader. Denne teknikken vil fungere for alle fargevalg eller alle størrelser bordet.

2 Bygg bordet ved hjelp av vanlige HTML table-bygningen verktøy.

3 I stilarket, lage en klasse som kan brukes på vekslende TR (tabell rad) elementer. Her er et eksempel:
.rowcolor {

background: #CCCCCC;

}

4 Hvordan lage Alternerende bakgrunnsfarger i tabellrader med CSS

I HTML, legger klassen til annenhver rad i tabellen. Bruk den til TR element. Se bilde for eksempel.

5 Hvis du ønsker å ha en annen farge for den raden i tabellen som inneholder overskriftene, kan du opprette en ny klasse eller id regelen i ditt stilark som bare vil bruke en bakgrunnsfarge til TH elementer.

Hint

  • Tabellen avbildet ovenfor bruker "border-kollaps: kollaps" regel for å fjerne den tomme plassen mellom bordgrenser.