Tabeller ska användas till presentation av tabelldata, men detta inte betyder dina tabeller för din data ska inte piffas eller pyntas!

Använd Canvas CSS för skapandet av stiliga tabeller med hjälp av class. Sidan presenteras flera tabeller med olika formateringar och kod som används för att skapa liknande.

Randiga tabeller

När du lägger till en tabell kan du modifiera första raden i HTML-koden kopplat till tabellen där du lägger till class-definitioner. I exemplet

<table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row" style="width: 600px;">

information om gruppmöte
Grupp	Datum	Tid	Plats
Grupp A	2022-09-19	12.00	Sal 1
Grupp B	2022-09-20	10.00	Sal 2
Grupp C	2022-09-21	08.45	Sal 3

Information om class identitet

I koden har vi efterfrågat att 4 klasser ska läggas till i tabellen (används CSS inbyggt i Canvas).

ic-Table - tala om för sidan att tabellen är en speciellt tabell
ic-Table--condensed - tas bort utrymme som vanligtvis finns ovan och under text i varje rad i tabellen
ic-Table--striped - växlas skuggningsalternativ radvis
ic-Table--hover-row - skapas en "skuggnings" effekt när användaren skrollas över rad i tabellen

Skuggningsfunktionen uppdateras automatiskt med tillägg eller radering av rader i tabellen.