Avanserte innstillinger p? tabeller

Lage tabell med sorterbare kolonner

Slik gj?r du

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...). Se skjermbildet til h?yre.

3. Sett deretter ?nskede innstillinger p? den enkelte kolonnen. Se innstillingene nedenfor.

Innstillinger du kan sette p? tabellheadere

Du m? spesifisere hvilke kolonner som skal sorteres ved ? sette en innstilling, s?kalt klasse, p? tabellheaderne (<th>) i kildekoden.

Du kan velge mellom f?lgende innstillinger:

Generiske

• class="sortable-numeric" (tall alene)
• class="sortable-text" (tekst alene)

Datoer

• class="sortable-date-dmy" (?sortable-date? sorterer etter amerikansk format: mdy)

Eksempler p? bruk

Tips: hold inne <shift> for ? sortere flere kolonner om gangen.

Eksempel p? automatisk sortering n?r siden lastes

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...), slik det er beskrevet i "Slik gj?r du", punkt 2. 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. OBS! Kolonneindeksen starter p? 0 og ikke 1.

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

<table class="table-wide-overflow">
  <thead> 
    <tr>
    ...  

Tabell med sebra-striper

?nsker du en tabell hvor annenhver rad har gr? og hvit bakgrunn kan du sette p? klassen "uio-zebra"

<table class="uio-zebra">
  <thead> 
    <tr>
    ...  

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.