Legg til stilarket fra pakken og sett CSS-klassen tabell på HTML-tabellen din.
ID
Fornavn
Etternavn
Rolle
1
Jean-Luc
Picard
Kaptein
2
William
Riker
Kommandør
3
Geordi
La Forge
Sjefsingeniør
Kopiert!
Stripete tabell
Bruk modifikatoren tabell--stripet for å gjøre annenhver tabellrad grå.
ID
Fornavn
Etternavn
Rolle
1
Jean-Luc
Picard
Kaptein
2
William
Riker
Kommandør
3
Geordi
La Forge
Sjefsingeniør
Kopiert!
Border tabell
Bruk modifikatoren tabell--border for å gi alle cellene en tydelig border på alle sidene.
ID
Fornavn
Etternavn
Rolle
1
Jean-Luc
Picard
Kaptein
2
William
Riker
Kommandør
3
Geordi
La Forge
Sjefsingeniør
Kopiert!
Sorterbar tabell
Knapper som er barn av th-elementene blir stylet til å være helt utfyllende og får et :after-element med to små chevrons som peker opp og ned for å indikere at kolonnen kan sorteres i vilkårlig rekkefølge. Bruk klassene tabell__th--sortert-desc og tabell__th--sortert-asc for at lenkene skal indikere hvilken retning kolonnen er sortert. Bruk klassen tabell__td--sortert på cellene i den sorterte kolonnen for å gi disse en svak grå bakgrunn.
advarsel
Husk at du må legge til både aria-sort og role="columnheader" på alle tabell-headere som skal sorteres. Bruk none/descending/ascending som verdier til aria-sort alt ettersom.
3
Geordi
La Forge
Sjefsingeniør
1
Jean-Luc
Picard
Kaptein
2
William
Riker
Kommandør
Kopiert!
Selekterbar tabell
Checkbokser som blir plassert i første celle på en rad vil bli stylet til å skjule sin
label og oppta kun 24x24 piksler. Bruk klassen tabell__tr--valgt på tr-elementene for å style alle cellene i den
raden som "valgt". Hvis det er ønsket at label skal vises på første elementet kan
man legge til data-label="true" på selve checkboxen.
advarsel
Husk å legg til aria-selected="true" på tr-elementet som representerer den valgte raden.
Geordi
La Forge
Sjefsingeniør
Jean-Luc
Picard
Kaptein
William
Riker
Kommandør
Kopiert!
Tabell med input-felter
Geordi
La Forge
Sjefsingeniør
William
Riker
Kommandør
Kopiert!
Komplisert header
ID
Fornavn
Etternavn
Kaptein
1
Jean-Luc
Picard
Kommandør
2
William
Riker
Sjefsingeniør
3
Geordi
La Forge
ID
Fornavn
Etternavn
Kopiert!
Tabell med divs
advarsel
Hvis man skal bygge tabeller uten å bruke vanlig <tabell>-markup er det svært viktig at man supplerer elementene med riktigerole-attributter og display-stiler for å bevare den semantiske verdien i tabellene. Vi anbefaler fortsatt å ikke ta i bruk denne metoden hvis mulig, da nettleseren ikke kan tolke tabellen like bra uten riktig markup.