Tabell

CSS

Enkel tabell

Legg til stilarket fra pakken og sett CSS-klassen tabell på HTML-tabellen din.

ID	Fornavn	Etternavn	Rolle
1	Jean-Luc	Picard	Kaptein
2	William	Riker	Kommandør
3	Geordi	La Forge	Sjefsingeniør

import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <th>ID</th>
      <th>Fornavn</th>
      <th>Etternavn</th>
      <th>Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jean-Luc</td>
      <td>Picard</td>
      <td>Kaptein</td>
    </tr>
    <tr>
      <td>2</td>
      <td>William</td>
      <td>Riker</td>
      <td>Kommandør</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Geordi</td>
      <td>La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Stripete tabell

Bruk modifikatoren tabell--stripet for å gjøre annenhver tabellrad grå.

ID	Fornavn	Etternavn	Rolle
1	Jean-Luc	Picard	Kaptein
2	William	Riker	Kommandør
3	Geordi	La Forge	Sjefsingeniør

import "nav-frontend-tabell-style";

<table className="tabell tabell--stripet">
  <thead>
    <tr>
      <th>ID</th>
      <th>Fornavn</th>
      <th>Etternavn</th>
      <th>Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jean-Luc</td>
      <td>Picard</td>
      <td>Kaptein</td>
    </tr>
    <tr>
      <td>2</td>
      <td>William</td>
      <td>Riker</td>
      <td>Kommandør</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Geordi</td>
      <td>La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Border tabell

Bruk modifikatoren tabell--border for å gi alle cellene en tydelig border på alle sidene.

ID	Fornavn	Etternavn	Rolle
1	Jean-Luc	Picard	Kaptein
2	William	Riker	Kommandør
3	Geordi	La Forge	Sjefsingeniør

import "nav-frontend-tabell-style";

<table className="tabell tabell--border">
  <thead>
    <tr>
      <th>ID</th>
      <th>Fornavn</th>
      <th>Etternavn</th>
      <th>Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jean-Luc</td>
      <td>Picard</td>
      <td>Kaptein</td>
    </tr>
    <tr>
      <td>2</td>
      <td>William</td>
      <td>Riker</td>
      <td>Kommandør</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Geordi</td>
      <td>La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Sorterbar tabell

Knapper som er barn av th-elementene blir stylet til å være helt utfyllende og får et :after-element med to små chevrons som peker opp og ned for å indikere at kolonnen kan sorteres i vilkårlig rekkefølge. Bruk klassene tabell__th--sortert-desc og tabell__th--sortert-asc for at lenkene skal indikere hvilken retning kolonnen er sortert. Bruk klassen tabell__td--sortert på cellene i den sorterte kolonnen for å gi disse en svak grå bakgrunn.

Husk at du må legge til både aria-sort og role="columnheader" på alle tabell-headere som skal sorteres. Bruk none/descending/ascending som verdier til aria-sort alt ettersom.


3	Geordi	La Forge	Sjefsingeniør
1	Jean-Luc	Picard	Kaptein
2	William	Riker	Kommandør

import "nav-frontend-tabell-style";

<table className="tabell">
  <caption role="alert" aria-live="polite">
    Table consisting of x - not sorted
  </caption>
  <thead>
    <tr>
      <th role="columnheader" aria-sort="none">
        <button aria-label="Sorter ID stigende">ID</button>
      </th>
      <th
        role="columnheader"
        aria-sort="descending"
        className="tabell__th--sortert-desc"
      >
        <button aria-label="Sorter Fornavn synkende">Fornavn</button>
      </th>
      <th role="columnheader" aria-sort="none">
        <button aria-label="Sorter Etternavn stigende">Etternavn</button>
      </th>
      <th role="columnheader" aria-sort="none">
        <button aria-label="Sorter Rolle stigende">Rolle</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td className="tabell__td--sortert">Geordi</td>
      <td>La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
    <tr>
      <td>1</td>
      <td className="tabell__td--sortert">Jean-Luc</td>
      <td>Picard</td>
      <td>Kaptein</td>
    </tr>
    <tr>
      <td>2</td>
      <td className="tabell__td--sortert">William</td>
      <td>Riker</td>
      <td>Kommandør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Selekterbar tabell

Checkbokser som blir plassert i første celle på en rad vil bli stylet til å skjule sin label og oppta kun 24x24 piksler. Bruk klassen tabell__tr--valgt på tr-elementene for å style alle cellene i den raden som "valgt". Hvis det er ønsket at label skal vises på første elementet kan man legge til data-label="true" på selve checkboxen.

Husk å legg til aria-selected="true" på tr-elementet som representerer den valgte raden.

Velg alle
Velg denne raden	Geordi	La Forge	Sjefsingeniør
Velg denne raden	Jean-Luc	Picard	Kaptein
Velg denne raden	William	Riker	Kommandør

import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <th width="1">
        <Checkbox label="Velg alle" />
      </th>
      <th role="columnheader" aria-sort="none">
        <button aria-label="Sorter Fornavn stigende">Fornavn</button>
      </th>
      <th
        role="columnheader"
        aria-sort="descending"
        className="tabell__th--sortert-desc"
      >
        <button aria-label="Sorter Etternavn stigende">Etternavn</button>
      </th>
      <th role="columnheader" aria-sort="none">
        <button aria-label="Sorter Rolle stigende">Rolle</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <Checkbox label="Velg denne raden" />
      </td>
      <td>Geordi</td>
      <td className="tabell__td--sortert">La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
    <tr className="tabell__tr--valgt" aria-selected="true">
      <td>
        <Checkbox label="Velg denne raden" checked readOnly />
      </td>
      <td>Jean-Luc</td>
      <td className="tabell__td--sortert">Picard</td>
      <td>Kaptein</td>
    </tr>
    <tr>
      <td>
        <Checkbox label="Velg denne raden" />
      </td>
      <td>William</td>
      <td className="tabell__td--sortert">Riker</td>
      <td>Kommandør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Tabell med input-felter


Geordi	La Forge	Sjefsingeniør

William	Riker	Kommandør

import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <th id="header-fornavn">
        <button aria-label="Sorter Fornavn stigende">Fornavn</button>
      </th>
      <th id="header-etternavn">
        <button aria-label="Sorter Etternavn stigende">Etternavn</button>
      </th>
      <th id="header-rolle">
        <button aria-label="Sorter Rolle stigende">Rolle</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Geordi</td>
      <td>La Forge</td>
      <td>Sjefsingeniør</td>
    </tr>
    <tr>
      <td>
        <Input aria-labelledby="header-fornavn" defaultValue="Jean-Luc" />
      </td>
      <td>
        <Input aria-labelledby="header-etternavn" defaultValue="Picard" />
      </td>
      <td>
        <Input aria-labelledby="header-rolle" defaultValue="Kaptein" />
      </td>
    </tr>
    <tr>
      <td>William</td>
      <td>Riker</td>
      <td>Kommandør</td>
    </tr>
  </tbody>
</table>;
 Kopiert!

Komplisert header

	ID	Fornavn	Etternavn
Kaptein	1	Jean-Luc	Picard
Kommandør	2	William	Riker
Sjefsingeniør	3	Geordi	La Forge
	ID	Fornavn	Etternavn

import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <td></td>
      <th>ID</th>
      <th>Fornavn</th>
      <th>Etternavn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kaptein</td>
      <td>1</td>
      <td>Jean-Luc</td>
      <td>Picard</td>
    </tr>
    <tr>
      <td>Kommandør</td>
      <td>2</td>
      <td>William</td>
      <td>Riker</td>
    </tr>
    <tr>
      <td>Sjefsingeniør</td>
      <td>3</td>
      <td>Geordi</td>
      <td>La Forge</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <th>ID</th>
      <th>Fornavn</th>
      <th>Etternavn</th>
    </tr>
  </tfoot>
</table>;
 Kopiert!

Tabell med divs

Hvis man skal bygge tabeller uten å bruke vanlig <tabell>-markup er det svært viktig at man supplerer elementene med riktige role-attributter og display-stiler for å bevare den semantiske verdien i tabellene. Vi anbefaler fortsatt å ikke ta i bruk denne metoden hvis mulig, da nettleseren ikke kan tolke tabellen like bra uten riktig markup.

Fornavn

Etternavn

Rolle

Jean-Luc

Picard

Kaptein

William

Riker

Kommandør

Geordi

La Forge

Sjefsingeniør

import "nav-frontend-tabell-style";

<div className="tabell" role="table">
  <div className="tabell__thead" role="row-group">
    <div className="tabell__tr" role="row">
      <div className="tabell__th" role="columnheader">
        Fornavn
      </div>
      <div className="tabell__th" role="columnheader">
        Etternavn
      </div>
      <div className="tabell__th" role="columnheader">
        Rolle
      </div>
    </div>
  </div>
  <div className="tabell__tbody" role="row-group">
    <div className="tabell__tr" role="row">
      <div className="tabell__td" role="cell">
        Jean-Luc
      </div>
      <div className="tabell__td" role="cell">
        Picard
      </div>
      <div className="tabell__td" role="cell">
        Kaptein
      </div>
    </div>
    <div className="tabell__tr" role="row">
      <div className="tabell__td" role="cell">
        William
      </div>
      <div className="tabell__td" role="cell">
        Riker
      </div>
      <div className="tabell__td" role="cell">
        Kommandør
      </div>
    </div>
    <div className="tabell__tr" role="row">
      <div className="tabell__td" role="cell">
        Geordi
      </div>
      <div className="tabell__td" role="cell">
        La Forge
      </div>
      <div className="tabell__td" role="cell">
        Sjefsingeniør
      </div>
    </div>
  </div>
</div>;
 Kopiert!

Rediger siden på Github