Tabell

CSS

Enkel tabell

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

IDFornavnEtternavnRolle
1Jean-LucPicardKaptein
2WilliamRikerKommandør
3GeordiLa ForgeSjefsingeniø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å.

IDFornavnEtternavnRolle
1Jean-LucPicardKaptein
2WilliamRikerKommandør
3GeordiLa ForgeSjefsingeniø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.

IDFornavnEtternavnRolle
1Jean-LucPicardKaptein
2WilliamRikerKommandør
3GeordiLa ForgeSjefsingeniø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

Lenker som er barn av th-elementene blir stylet til å være helt utfyllende og får 2 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 i stedet skal vise en enkelt chevron i den retningen kolonnen er sortert. Bruk klassen tabell__td--sortert på cellene i den sorterte kolonnen for å gi disse en svak grå bakgrunn.

advarsel
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.
IDFornavnEtternavnRolle
3GeordiLa ForgeSjefsingeniør
1Jean-LucPicardKaptein
2WilliamRikerKommandør
import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <th role="columnheader" aria-sort="none">
        <Lenke href="#">ID</Lenke>
      </th>
      <th
        role="columnheader"
        aria-sort="descending"
        className="tabell__th--sortert-desc"
      >
        <Lenke href="#">Fornavn</Lenke>
      </th>
      <th role="columnheader" aria-sort="none">
        <Lenke href="#">Etternavn</Lenke>
      </th>
      <th role="columnheader" aria-sort="none">
        <Lenke href="#">Rolle</Lenke>
      </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--valgttr-elementene for å style alle cellene i den raden som "valgt".

advarsel
Husk å legg til aria-selected="true" tr-elementet som representerer den valgte raden.
FornavnEtternavnRolle
GeordiLa ForgeSjefsingeniør
Jean-LucPicardKaptein
WilliamRikerKommandø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">
        <Lenke href="#">Fornavn</Lenke>
      </th>
      <th
        role="columnheader"
        aria-sort="descending"
        className="tabell__th--sortert-desc"
      >
        <Lenke href="#">Etternavn</Lenke>
      </th>
      <th role="columnheader" aria-sort="none">
        <Lenke href="#">Rolle</Lenke>
      </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

FornavnEtternavnRolle
GeordiLa ForgeSjefsingeniør
WilliamRikerKommandør
import "nav-frontend-tabell-style";

<table className="tabell">
  <thead>
    <tr>
      <th id="header-fornavn">
        <Lenke href="#">Fornavn</Lenke>
      </th>
      <th id="header-etternavn">
        <Lenke href="#">Etternavn</Lenke>
      </th>
      <th id="header-rolle">
        <Lenke href="#">Rolle</Lenke>
      </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

IDFornavnEtternavn
Kaptein1Jean-LucPicard
Kommandør2WilliamRiker
Sjefsingeniør3GeordiLa Forge
IDFornavnEtternavn
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>
      <th>Kaptein</th>
      <td>1</td>
      <td>Jean-Luc</td>
      <td>Picard</td>
    </tr>
    <tr>
      <th>Kommandør</th>
      <td>2</td>
      <td>William</td>
      <td>Riker</td>
    </tr>
    <tr>
      <th>Sjefsingeniør</th>
      <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

advarsel
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.
Fornavn
Etternavn
Rolle
Jean-Luc
Picard
Kaptein
William
Riker
Kommandør
Geordi
La Forge
Sjefsingeniør
<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!