För att göra tabeller lättare att läsa är det ofta bra att utforma rader med alternerande bakgrundsfärger. Ett av de vanligaste sätten att utforma tabeller är att ställa in bakgrundsfärgen för varannan rad. Detta kallas ofta för "zebra-ränder".
Du kan åstadkomma detta genom att ställa in varannan rad med en CSS-klass och sedan definiera stilen för den klassen. Detta fungerar men är inte det bästa eller mest effektiva sättet att göra det. När du använder den här metoden kan du behöva redigera varje rad i tabellen varje gång du behöver redigera den tabellen för att säkerställa att varje rad överensstämmer med ändringarna. Om du till exempel sätter in en ny rad i tabellen måste klassen ändras på varannan rad under den.
CSS gör det enkelt att utforma bord med zebra-ränder. Du behöver inte lägga till något extra HTML attribut eller CSS-klasser använder du bara: nth-of-type (n) CSS-väljare.
Väljaren: nth-of-type (n) är en strukturell pseudoklass i CSS som låter dig utforma element baserat på deras relationer till föräldra- och syskonelement. Du kan använda den för att välja ett eller flera element baserat på deras källordning. Med andra ord kan det matcha varje element som är det nte barnet till en viss typ av sin förälder.
Bokstaven n kan vara ett nyckelord (som udda eller jämnt), ett tal eller en formel.
Till exempel, för att utforma alla andra styckenstaggar med en gul bakgrundsfärg, innehåller ditt CSS-dokument:
p: nth-of-type (udda) {
bakgrund: gul;
}
Börja med din HTML-tabell
Skapa först din tabell som du normalt skulle skriva den i HTML. Lägg inte till några specialklasser i raderna eller kolumnerna.
Lägg till följande CSS i ditt formatmall:
tr: nth-of-type (udda) {
bakgrundsfärg: #ccc;
}
Detta stylar varannan rad med en grå bakgrundsfärg som börjar med den första raden.
Stil alternerande kolumner på samma sätt
Du kan göra samma typ av styling för kolumner i dina tabeller. För att göra det ändrar du bara tr i din CSS-klass till td. Till exempel:
td: nth-of-type (udda) {
bakgrundsfärg: #ccc;
}
Använda formler i en n-typ (n) väljare
Syntaxen för en formel som används i väljaren är an + b.
- a är ett tal som representerar cykeln eller indexstorleken.
- n är faktiskt bokstaven "n" och representerar en räknare som har 0.
- + är en operatör, som också kan vara "-"
- b är ett heltal och representerar förskjutningsvärdet - till exempel hur många rader nedåt ska väljaren börja använda bakgrundsfärgen. Detta krävs om en operatör ingår i formeln.
Om du till exempel vill ställa in en bakgrundsfärg för var tredje rad, skulle din formel vara 3n + 0. Din CSS kan se ut så här:
tr: nth-of-type (3n + 0) {
bakgrund: slategray;
}
Användbara verktyg för att använda nth-of-type Selector
Om du känner dig lite avskräckt av formelaspekten av att använda pseudoklass nth-of-type väljare, prova: nth Testers webbplats som ett användbart verktyg som kan hjälpa dig att definiera syntaxen för att uppnå det utseende du vill ha. Använd rullgardinsmenyn för att välja n-typ (du kan också experimentera med andra pseudoklasser här, till exempel n-barn).