Table

Klassen settes på et ekte <table>. Det er <th> med scope som gjør at skjermlesere kan si «Beløp, 1 240 kroner» når brukeren står i en celle. Bygger du tabellen av <div>-er, finnes ikke den koblingen, og tallene står uten betydning.

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/table/table.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<table class="fs-table" data-variant="striped">
<caption>Fakturaer i 2026</caption>
<thead>
  <tr>
    <th scope="col">Faktura</th>
    <th scope="col">Forfall</th>
    <th scope="col" data-align="end">Beløp</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">2026-0481</th>
    <td>4. mars</td>
    <td data-align="end">1 240 kr</td>
  </tr>
  <tr>
    <th scope="row">2026-0482</th>
    <td>4. april</td>
    <td data-align="end">980 kr</td>
  </tr>
</tbody>
</table>

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/table.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<div className={fs.table.scroll} tabIndex={0} role="region" aria-label="Fakturaer">
  <table {...fs.table({ variant: "striped" })}>
    <caption>Fakturaer i 2026</caption>
    <thead><tr><th scope="col">Sak</th></tr></thead>
    <tbody><tr><th scope="row">2024/1187</th></tr></tbody>
  </table>
</div>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const tabell = document.querySelector<HTMLTableElement>("#fakturaer")

fs.setAttributes(tabell, fs.table({ variant: "striped", hoverable: true }))

fs.table.scroll gir klassen på beholderen rundt. Se Typesikker bruk.

Attributt	Effekt
data-variant="striped"	Dempet flate på annenhver rad
data-hoverable	Markerer raden under musa. Bruk bare når raden kan trykkes på.
data-align="end" på en celle	Høyrestiller, for beløp og antall

Tall står i tabular-nums, så sifrene får lik bredde og kolonnen kan leses nedover.

Brede tabeller

En tabell som er bredere enn skjermen må kunne rulles sidelengs, og det området må kunne nås med tastatur:

<div class="fs-table-scroll" tabindex="0" role="region" aria-label="Fakturaer">
  <table class="fs-table">…</table>
</div>

tabindex="0" er ikke valgfritt. Uten det kommer ingen som navigerer med tastatur til innholdet som ligger utenfor kanten. role="region" med en tekst gjør at skjermleseren sier hva området inneholder når fokus havner der.

Klasser du kan style

Klasse	Hva det er
.fs-table	Selve tabellen. Varianten kommer fra data-variant.
.fs-table-scroll	Beholderen som lar en bred tabell rulles

Variabel	Standard
--fs-table-cell-padding	var(--fs-spacing-2) var(--fs-spacing-3)

Se Tilpasning for hvordan variablene og laget virker.

En tettere tabell

Trenger du flere rader på skjermen, er det cellenes luft som skal ned. Det er én variabel, og den finnes ingen data-size for:

Eksempel

Ren HTML

<table class="fs-table kompakt">
<caption>Fakturaer i 2026</caption>
<thead>
  <tr>
    <th scope="col">Faktura</th>
    <th scope="col" data-align="end">Beløp</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">2026-0481</th>
    <td data-align="end">1 240 kr</td>
  </tr>
  <tr>
    <th scope="row">2026-0482</th>
    <td data-align="end">980 kr</td>
  </tr>
</tbody>
</table>

.kompakt {
--fs-table-cell-padding: var(--fs-spacing-1) var(--fs-spacing-2);
}

Skriften skal du la være. --font-size-m i tabellen er den samme som brødteksten, og tall blir vanskeligere å lese nedover i en kolonne når de krymper. Vil du likevel ha mindre tekst, er det en vanlig regel i din egen CSS, ikke en variabel, siden den ikke er ment å endres.

Tilgjengelighet

• Hver kolonneoverskrift skal være <th scope="col">, og raden sin egen nøkkel <th scope="row">. Da vet skjermleseren hvilken kolonne og rad en celle hører til.
• Gi tabellen en <caption>. Den sier hva tabellen inneholder, og er det første som leses opp.
• Slå aldri sammen celler for å få et oppsett til å se riktig ut. Sammenslåtte celler gjør navigasjonen uforutsigbar.
• Skal rader kunne trykkes på, legg lenken i en celle. En hel rad som er klikkbar kan ikke nås med tastatur.