Bruk tabellverktøyet i Vortex
Bruk tabellverktøyet i Vortex, ikke tabulator eller mellomrom for å lage noe som ser ut som en tabell. Dette er viktig for å gjøre tabellen tilgjengelig for alle, blant annet kodet med rett element.
Velg tabellikonet i redigeringsmodus og definer egenskaper for tabellen.
Tabelloverskrifter
For at en bruker skal kunne forstå tabellen, må det finnes tydelige tabelloverskrifter som tabelltittel og kolonne- og radoverskrifter.
- Velg antall rader og kolonner.
- Når du har opprettet tabellen, skriver du inn kolonneoverskrifter og radoverskrifter. Det er viktig at du definerer radoverskrifter slik at hjelpeteknologier kan knytte celleinnhold til disse, så den logiske rekkefølgen kan følges.
- Tomme kolonner eller rader skal ikke brukes for å skape luft i tabellen.
- Skriv inn tittel i tittel-feltet som kortfattet skal forklare hva slags informasjon tabellen inneholder. Overskriften blir plassert over selve tabellen.
Tabellceller skal utelukkende brukes til tabelldata. Om forklaringer og fotnoter finnes til tabelldata, skal disse legges utenfor selve tabellen.
Hold tabellen enkel
For å ivareta tilgjengeligheten i tabeller bør du unngå å lage dem komplekse, for eksempel bruke en tabell i en annen tabell med celler i ulik høyde og rader med varierende antall kolonner. Da er det ikke mulig å knytte sammen rad og kolonneoverskrifter. Hold derfor tabellene så enkle som mulig.
Tabellsammendrag
I helt enkle tabeller vil tittel og sammendrag ofte være tilnærmet like. Da er det tilstrekkelig at bare en av delene blir definert, gjerne tittel (se: tabelloverskrifter).
Hvis du må lage en kompleks tabell, må du skrive et kort sammendrag som oppsummerer innholdet og hensikten med tabellen, og de viktigste konklusjonene. Klikk på tabell-ikonet og skriv inn i sammendrag-feltet under "Egenskaper for tabell". Dette skaper en skjult forklaring til tabellen som kan leses opp av en del hjelpemidler.
Sebra-stiper i tabellen
Ønsker du en tabell med grå bakgrunn på annenhver rad kan du legge inn klassen "uio-zebra": <table class="uio-zebra"...>