Tabell

Slik lager du en tabell

Tabeller skal alltid lages fra bunn i Vortex 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 ?uio-zebra? i feltet for stilklasse i tabelldialogen.

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 tilpasses p? ulike m?ter.

?nsker du en tabell med mindre fontst?rrelse kan du legge inn ?retro? i feltet for stilklasse i tabelldialogen.

Ekstra bred tabell

For ? unng? at tabeller g?r utover bredden av designet s? kan du legge inn ?table-wide-overflow?i feltet for stilklasse.

Slik kombinerer du innstillinger p? tabeller

Du kan kombinere innstillingene for f.eks. zebra-striper med ekstra bred tabell p? denne m?ten: ?uio-zebra table-wide-overflow?.

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>

Unng? at tekst brekker

For ? unng? at teksten i en celle brekker over flere linjer kan du legge inn koden ?style="white-space: nowrap;"? p? cellene (<td>).

<td style="white-space: nowrap;">10:00¨C12:30</td>

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.