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.

nb! Sjekkliste

  • Første rad må være en overskriftsrad:  <thead><tr><th> heller enn <tr><td>
  • <caption> er et must. For mer om hvorfor se universell utforming av innhold.
  • Unngå store eller kompliserte tabeller. Lag heller flere enkle tabeller med overskrifter og anker.
  • Unngå tabeller med flere verdier i en celle
  • Unngå blanke celler i første spalte for å lage kunstig innrykk av informasjon. Duplisere heller
  • Bredde bør defineres med bruk av % heller en piksler (px). 
  • Bruk forhåndsdefinerte tabellstiler (under) og unngå egen formattering.  

Tabellstiler

tbl-headrow-dark2
Stil =tbl-headrow-dark2
tbl-simple-dark2
Stil = tbl-simple-dark2
tbl-headrow-line2
Stil =  tbl-headrow-line2
tbl-simple-light2
Stil = tbl-headrow-light2
tbl-simple-light2
Stil = tbl-simple-light2
tablesorter OG tbl-headrow-light2
Stil =  tablesorter (*)
tablesorter stilen kan/bør kombineres med en annen stil, som tbl-simple-light2: "tbl-simple-light2 tablesorter".

Hvordan legge til ønsket stil

Tabellstilene funker 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. 

For å opprette en ny tabell:

  1. Klikk på tabell-ikonet i WYSIWYG-en. (Se bilde over).
  2. Legg markøren i tabellen, trykk på høyre museknappen, » Egenskaper for tabell. 
  3. Endre følgende innstillinger:
    • Under Breddebruk (ikke piksler). Alternativt la feltet stå tom. 
    • Høyde bør være tom/udefinert. 
    • Under Overskrifter velg Første rad.
    • Endre Rammestørrelse, Cellemarg og Cellepolstring til 
    • Under Tittel beskriv hva tabellen viser. Vær presis. (Dette er tabellens caption)
    • Gå til fanen Avansert og under Stilarkklasser, skriv navnet til tabellstilen du ønsker (f.eks. tbl-simple-light2 )

Skjermbilde - Egenskaper for tabell (Grunnleggende)Skjermbilde - Avansert fane - Egenskaper for tabell

 

Krav til tabelltittel (caption)

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

  • Tabelltittelen er viktigere enn en vanlig overskrift over tabellen. 
  • 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
  • Tabelltittelen bør aldri være lik den som står i tabellens sammendrag-felt (summary) 

Liker du ikke hvordan det 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 (se bildet under).

Skjermbilde: redigeringmodus vs. publiseringsmodus

Løs tabellproblemer (troubleshooting)

Hvor kan stilene benyttes?

  • 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
  • Tablesorter fungerer ikke optimalt i toggler- portlets

Dersom tabellen din mangler formatering i første rad:

  1. Sjekk at wikisiden er av type HTML, og ikke Creole
  2. Tabellens første rad må være en "overskriftsrad". Du bør se <thead><tr><th> heller enn <tr><td> i kildekode
  3. Tabellsorter krever også at <thead>  er i bruk rundt overskriftsrad
<table class="tbl-headrow-light2 tablesorter">
<caption>Teknisk eksempel på enkel tabell</caption>
<thead>
<tr>

<th> Tabelloverskrift 1 </th>
<th> Tabelloverskrift 2 </th>
</tr>
</thead>
<tbody>
<tr>

<td> Innhold - celle 1 </td>
<td> Innhold - celle 2 </td>
</tr>
</table>

 

0 Vedlegg
14558 Visninger
Gjennomsnitt (3 Stemmer)