Tabell

Slik lager du en tabell

Tabeller skal alltid lages fra bunn i Vortex, og ikke kopieres inn fra Word, Excel eller liknende. Dette for å ivareta krav til universell utforming og design. 

Innstillinger på tabellen

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"> 

Sorterbare kolonner

1. Åpne redigeringsmodus for artikkelen og velg kildevisning av feltet som tabellen ligger i.
2. Sett innstillingen class="sortable" etter starten på tabell-koden:

   <table class="sortable"> 
   

3. Du må spesifisere hvilke kolonner som skal sorteres ved å sette en innstilling, såkalt klasse, på tabellheaderne (<th>) i kildekoden.
   • Generiske: class="sortable-numeric" (tall alene) eller class="sortable-text" (tekst alene).
   • Datoer:class="sortable-date-dmy" («sortable-date» sorterer etter amerikansk format: mdy)

4. Hvis du ønsker at tabellen skal ha automatisk sortering når den lastes, setter du innstillingen «sortable-onload-<kolonne #0>-...-<kolonne #n>» øverst i tabell-koden (etter <table...). Bokstaven «r» bak kolonnenummeret gir reversert sortering. Merk at du ikke kan bruke «sortable-onload» alene. F.eks. «sortable-onload-0-1r-4» vil sortere første kolonne vanlig, andre kolonne reversert og femte kolonne vanlig. Vær oppmerksom på at kolonneindeksen starter på 0 og ikke 1.

5. Hvis du ønsker at kolonnen skal sorteres reversert først, kan du i tillegg bruke innstillingen «favour-reverse» i koden øverst i tabellen (etter <table...).

Vise bred tabell

Tabeller som tar mye plass kan stilsettes med klassen "retro" for å få mindre fontstørrelse og dermed ta mindre plass.

Åpne tabell-egenskaper, gå på "avansert" og skriv inn "retro". Hvis det er flere stilarkklasser, skilles dem med komma og mellomrom.

Ekstra bred tabell

For å unngå at tabeller går utover bredden av designet så kan du sette på klassen "table-wide-overflow"

Slik kombinerer du innstillinger på tabeller

Du kan kombinere innstillingene for f.eks. zebra-striper med ekstra bred tabell på denne måten:

<table class="uio-zebra table-wide-overflow"> 

Lage mobilvennlig tabell

Sette minimumsbredde på kolonner: Hvis du ønsker en minimumsbredde på kolonnene i responsivt design kan du sette på klassen "responsive-min-width".

Faste bredder på kolonnene

Ønsker du en tabell med faste bredder på kolonnene kan du sette på klassen "fixed-layout" på <table>.

Du må også sette style="width: <bredde-i-prosent>" på alle <th>-ene.

<table class="fixed-layout">
  <thead>
    <tr>
      <th style="width: 50%">A</th>
      <th style="width: 50%">B</th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

Datatabell

Mer avansert tabell med søk/filtrering, blaing og sortering. Kan kombineres med de fleste tabellklasser unntatt "sortable".

Merk at denne stiller krav til at alle radene i samme kolonne har samme format for sortering.

Se egen veiledning.

Summering av tallverdier i en kolonne

Hvis du ønsker total av en kolonne (ikke første) som settes inn i tabell footer, så kan du bruke klassen "table-sum" på <th>-en (fungerer bare med en kolonne pr. tabell).

<table>
    <thead>
        <tr>
            <th scope="col">A</th>
            <th class="table-sum" scope="col">B</th>
        </tr>

Hvis mellomrom mellom tusen og/eller hvis ",-" til slutt i et av tallene så blir total også formatert slik.

Hvis ikke er i tusen og har desimaler som også skal summeres, så må bruke punktum mellom heltall og desimalene.