Wikier

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

  •  Første rad er overskriftsrad: <thead><tr><th> heller enn <tr><td>
  •   <caption> er brukt eller det er en overskrift rett over tabellen.  
  •  Tabellen er hverken stor eller komplisert.
  •  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.  
  •  Bredden er definert med bruk av % heller en piksler (px).
  •  Tabellstiler (under) er brukt til stiling, heller enn egen formattering.

Tabellstiler

skjermbilde av stil tbl-headrow-dark2

Stil opsjon: Table dark

class="tbl-headrow-dark2"

skjermbilde av stil tbl-simple-dark2

Stil = Table dark bordered

class="tbl-simple-dark2"

skjermbilde av stil  tbl-simple-light2

Stil opsjon: Table light

class="tbl-headrow-light2"

skjermbilde av stil  tbl-headrow-line2

Stil = Table simple

class ="tbl-headrow-line2"

skjermbilde av stil tablesorter OG tbl-headrow-light2

Stil opsjon: Table sortable

class="tablesorter"  (*)

* tablesorter stilen kan/bør kombineres med en annen stil, for eksempel: "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.

3. Under Overskrifter velg Første rad

4. Kontrollere følgende innstillinger:

  • Under Bredde , bruk % (ikke piksler). Alternativt la feltet stå tom.
  • Høyde bør være tom/udefinert.
  • Endre Rammestørrelse, Cellemarg og Cellepolstring la feltet stå tom, eller sett til 0
  • Under Tittel beskriv hva tabellen viser. Vær presis. (Dette er tabellens caption)

5. Gå til fanen Avansert

6.  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 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).

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>