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 mobilvennlige.

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 tabellen enkel.
• Det er kun en verdi i hver celle, ikke flere avsnitt og linjeskift.
• Det er ingen blanke celler i første spalte for å lage kunstig innrykk av informasjon.  
• NTNU tabellstiler brukes til stiling, ikke 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 % eller la feltet stå tomt
• Høyde: bør være tomt/udefinert
• Rammestørrelse, Cellemarg og Cellepolstring: la disse feltene stå tomme
• Tittel: beskriv hva tabellen viser. Dette er tabellens caption

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?

Stilene kan 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 ikke brukt i en accordian/toggler. Det er for komplekst og lite hensiktsmessig.

Kodeeksempel

Tabellen over vil se slik ut