For innholdsprodusenter ved NTNU.

Når skal du bruke tabeller?

Ubevisst bruk av tabeller kan svært ofte resultere i sider som er mindre tilgjengelige, og mindre mobilvennlig.

Hvis det er design og layout som ligger til grunn for din bruk av en tabell bør du ikke bruke tabell. Spør om råd før du går videre. En tabell egner seg hvis det er naturlig å sammenligne informasjon mellom rader eller kolonner, og tabellens innhold blir like forståelig sortert på innholdet i kolonne 2 som når det er sortert på kolonne 1.

Sjekkliste

• <caption> er brukt eller det er en overskrift rett over tabellen.  
• Tabellen er hverken stor eller komplisert. Hold tabellene enkel.
• Det er kun en verdi i hvert celle ikke flere avsnitter og linjeskifter.
• Det er ingen blanke celler i første spalte for å lage kunstig innrykk av informasjon.  
• NTNU tabellstiler brukt til stiling, heller enn egen formattering.

Tabellstiler

Stil opsjon Table dark

class="tbl-headrow-dark2"

Stil opsjon: Table light

class="tbl-headrow-light2"

Stil = Table simple

class ="tbl-headrow-line2"

Stil opsjon: Table sortable

class="tablesorter"

Bør kombineres med en annen stil, f.eks. class="tbl-simple-light2 tablesorter"

Hvordan legge til ønsket stil

Tabellstilene gjelder på ntnu.no, ntnu.edu, meldinger, temasider, og Innsidas wikisider av type HTML, men ikke for wikisider i Innsida av type Creole, som får automatisk stiling.

1. For å opprette en ny tabell klikk på  tabell-ikonet i WYSIWYG-en.  

2. For en eksisterende tabell legg markøren i tabellen, trykk på høyre museknappen, velg Egenskaper for tabell.

• Overskrifter velg Første rad
• Bredde, bruk % alternativt la feltet stå tom.
• Høyde bør være tom/udefinert.
• La disse felt stå tom: Rammestørrelse, Cellemarg og Cellepolstring
• Under Tittel beskriv hva tabellen viser. Dette er tabellens captio

3. Gå til fanen Avansert og under Stilarkklasser, skriv navnet til tabellstilen du ønsker (f.eks. tbl-headrow-light2 )

Krav til tabelltittel caption

Tabelltittel <caption> hjelper brukere som benytter skjermleser (blinde og svaksynte) til å finne tabellen og vurdere om tabellen skal leses.

• Tabelltittelen bør være presist formulert
• Tabelltittelen bør være unik slik at en bruker som ikke ser tabellens innhold kan skille mellom flere tabeller på en side

Liker du ikke hvordan caption ser ut?

I Liferay er tabellens <caption> midtstilt på tvers av tabellen når du er i redigeringsmodus, men ser annerledes ut når du publiserer artikkelen. 

Problemer?

Mens stilene benyttes lan benyttes på ntnu.no, ntnu.edu, meldinger, temasider, og Innsidas wikisider av type HTML, stilene kan ikke benyttes for wikisider i Innsida av type Creole som får automatisk stiling.

Dersom tabellen din mangler formatering:

• Sjekk at wikisiden er av type HTML, og ikke Creole.
• Sjekk at tabellens første rad er en "overskriftsrad". Du bør se <thead> og <th> som i kodeeksempel under.
• Sjekk at tabellen er ikke brukt i en accordian/toggler. Det er for kompleks og lite hensynsmessig.

Kodeeksempel

Tabellen over vil se slik ut