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.