Sådan oprettes Skiftende baggrundsfarver i tabelrækker med CSS

June 12

I større tabeller er det ofte en hjælp til at læse for at have skiftende baggrundsfarver for hver anden række i tabellen. Det kan hjælpe læserne følge linjer på tværs af bordet. Det er let at implementere med CSS. Her er hvordan.

Instruktioner

1 Sådan oprettes Skiftende baggrundsfarver i tabelrækker med CSS

Her er en simpel tabel med skiftevis grå og hvide rækker. Denne teknik vil arbejde for enhver farveskema eller enhver størrelse bord.

2 Byg bordet ved hjælp af din normale HTML tabel-bygning værktøjer.

3 I stylesheet, oprette en klasse, der kan anvendes på vekslende TR (tabel række) elementer. Her er et eksempel:
.rowcolor {

background: #CCCCCC;

}

4 Sådan oprettes Skiftende baggrundsfarver i tabelrækker med CSS

I HTML, tilføje klassen til skiftende rækker i din tabel. Anvend den til TR element. Se billede for eksempel.

5 Hvis du gerne vil have en anden farve til række i tabellen, der indeholder overskrifterne, kan du oprette en ny klasse eller id regel i dit stylesheet, som kun vil anvende en baggrundsfarve til TH elementer.

TIPS

  • Tabellen billedet ovenfor er at bruge "border-kollaps: kollaps" regel at fjerne den tomme plads mellem tabelkanter.

relaterede artikler