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.