Tabeller

En riktig <table>. Streck istället för zebra.

Tabell

Siffror är högerställda och tabulära.

Projekt	Kund	Ansvarig	Nedlagt	Budget	Status
Webbplats 2026	Region Skåne	Linn Svensson	412,5	600	Pågår
Intranät	Kommunal	Paul Andersson	228,0	240	Väntar
Förvaltning 2026	Skatteverket	Niklas Ek	247,5	240	Försenat
Municipio Cloud	Umeå universitet	Fredrik Holm	96,0	120	Pågår
Analys-onboarding	Billerud	Eva-Maria Nilsson	18,5	20	Klart

<div class="ws-table-scroll">
  <table class="ws-table">
    <thead><tr><th scope="col">Projekt</th><th scope="col" data-align="end">Timmar</th></tr></thead>
    <tbody><tr><td>…</td><td class="ws-num">412,5</td></tr></tbody>
  </table>
</div>

Sortering

Riktningen ligger i aria-sort; pilen ritas ur det.

Projekt	Nedlagt	Budget
Webbplats 2026	412,5	600
Förvaltning 2026	247,5	240
Intranät	228,0	240

<!-- sorteringen är en URL: en länk, inte en knapp -->
<th scope="col" aria-sort="descending">
  <a href="?sort=hours&amp;direction=asc">Nedlagt</a>
</th>


Webbplats 2026	412,5	600
Förvaltning 2026	247,5	240
Intranät	228,0	240

<th scope="col" aria-sort="descending">
  <button type="button">Nedlagt</button>
</th>

Rad för rad

<Table>, <HeadCell>, <Row> och <Cell>, eller headCell(), row() och cell(). En rubrik med href sorteras av servern; med sortable sorteras den här på sidan av init(). Klicka på en rubrik.


Webbplats 2026	Region Skåne	412,5	600
Intranät	Kommunal	228,0	240
Förvaltning 2026	Skatteverket	247,5	240
Municipio Cloud	Umeå universitet	96,0	120
Analys-onboarding	Billerud	18,5	20
Utan budget	Intern	3,5

<Table label="Projekt" fixed>
  <Fragment slot="head">
    <HeadCell sortable width="lg">Projekt</HeadCell>
    <HeadCell sortable>Kund</HeadCell>
    <HeadCell sortable type="num" align="end" width="sm">Nedlagt</HeadCell>
    <HeadCell sortable type="num" align="end" width="sm">Budget</HeadCell>
  </Fragment>
  <Row><Cell>Webbplats 2026</Cell>…<Cell num data-sort="412.5">412,5</Cell></Row>
</Table>

<!-- sorterad av servern -->
<HeadCell sort="descending" href="?sort=timmar&riktning=asc" align="end">Nedlagt</HeadCell>

Grupper och inställt

En grupprubrik är en neutral rad med <th scope="rowgroup">. data-indent sätter en rad som hör till raden ovanför ett steg in. En inställd rad (data-state="cancelled") stryks över; en etikett i den gör det inte och säger varför. Bredder med data-width på <col> eller rubriken, och ws-table--min-md eller --min-lg för en tabell som hellre rullar än kläms.

Tid	Händelse	Ansvarig
Måndag 12 oktober
09:00–09:30	Avstämning med Region Skåne Bekräftad	Linn Svensson
Förberedelser	Agenda och underlag	Linn Svensson
13:00–15:00	Workshop: informationsarkitektur Inställd	Paul Andersson
Tisdag 13 oktober
10:00–11:00	Leveransgenomgång	Niklas Ek

Utanför en tabell: Workshop 13:00 Inställd

<Table label="Kalender" fixed minWidth="md">
  <col slot="colgroup" data-width="sm" /><col slot="colgroup" />…
  <Row group><Cell header="rowgroup" colspan={3}>Måndag 12 oktober</Cell></Row>
  <Row><Cell>09:00</Cell><Cell>Avstämning <StatusPill>Bekräftad</StatusPill></Cell>…</Row>
  <Row state="cancelled"><Cell>13:00</Cell><Cell>Workshop <StatusPill>Inställd</StatusPill></Cell>…</Row>
  <Row><Cell indent>Förberedelser</Cell>…</Row>
</Table>

<span class="ws-cancelled">Workshop</span>   <!-- utanför en tabell -->

Markera rader

En verktygsrad med bulk är ett formulär ovanför tabellen, och dess kryssrutor står i raderna med form. Antalet läses upp, och åtgärderna väntar tills något är markerat. Utan skript skickas formuläret ändå.

	Datum	Händelse
	mån 12 okt	Avstämning
	tis 13 okt	Workshop
	ons 14 okt	Leveransgenomgång

<ToolbarRow bulk id="sortera" action="/calendar/sort" aria-label="Markerade händelser">
  <select name="klient" aria-label="Klient för markerade">…</select>
  <Button type="submit" size="sm" name="kategori" value="klient" data-malm-bulk-action>Koppla till klient</Button>
</ToolbarRow>

<th><input type="checkbox" data-malm-bulk-all="sortera" aria-label="Markera alla" /></th>
<td><input type="checkbox" name="id" value="412" form="sortera" data-malm-bulk-row aria-label="Markera Avstämning" /></td>

Summor

Dubbelt streck ovanför summan, som i en huvudbok.

	Projekt	Nedlagt
	Webbplats 2026	412,5
	Intranät	228,0
	Förvaltning 2026	247,5
	Summa markerade	640,5

<tfoot><tr><th scope="row">Summa</th><td class="ws-num">906,0</td></tr></tfoot>

Breda tabeller

Scrollar i sin egen låda. tabindex='0' gör den nåbar med tangentbord.

Medarbetare	Mån	Tis	Ons	Tors	Fre	Summa
Anton Berg	8,0	7,5	8,0	6,0	8,0	37,5
Eva-Maria Nilsson	8,0	8,0	8,0	8,0	8,0	40,0
Fredrik Holm	8,0	8,0	8,0	8,0	8,0	40,0
Johan de Geer	8,0	7,5	8,0	8,0	8,0	39,5
Linn Svensson	8,0	8,0	8,0	6,0	8,0	37,5
Niklas Ek	8,0	8,0	8,0	8,0	8,0	40,0
Paul Andersson	8,0	7,5	8,0	8,0	8,0	39,5
Westin Lund	8,0	8,0	8,0	8,0	8,0	40,0

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

Fastnålade kolumner

Kolumnen som säger vilken rad det är står kvar när resten scrollar i sidled.

Medarbetare	Mån	Tis	Ons	Tors	Fre	Summa
Alva Nyström	8,0	7,5	8,0	6,0	9,0	38,5
Bengt Ohlsson	8,0	8,0	4,0	8,0	8,0	36,0

<td data-pin="start">Alva Nyström</td>
<td data-pin="end" class="ws-num">38,5</td>

Tonade rader

Tonen säger vad raden är, aldrig hur den ser ut — och bär sin egen textfärg.

Faktura	Förfaller	Belopp SEK
2026-118	30 sep	42 500,00
2026-117	12 sep	18 000,00
2026-104	3 aug	7 250,00
2026-101	Betald	31 000,00

<tr data-tint="warn">…</tr>
<tr data-tint="danger">…</tr>

Täta tabeller

--dense för en tabell med många kolumner siffror i en panel. --nowrap håller varje cell på en rad, --top ställer cellerna upptill och --fixed tar bredderna från rubrikcellerna. th[data-group] står över en grupp kolumner, och ws-table-scroll--framed ger tabellen en egen kant i en panels innehåll.

Sida	September		Augusti
Sida	Besök	Personer	Besök	Personer
/start	12 480	3 912	11 902	3 804
/lon-och-ersattning	4 310	2 207	3 988	2 119
/semester	2 045	1 630	3 811	2 740

<div class="ws-table-scroll ws-table-scroll--framed" tabindex="0">
  <table class="ws-table ws-table--dense ws-table--nowrap ws-table--no-sticky">
    <thead>
      <tr><th scope="col"></th><th scope="colgroup" colspan="2" data-group>September</th><th scope="colgroup" colspan="2" data-group>Augusti</th></tr>
      <tr><th scope="col">Sida</th><th scope="col" data-align="end">Besök</th>…</tr>
    </thead>
    …
  </table>
</div>

Värmeceller

En cell vars värde också är dess ton: accenten blandad i ytan med --ws-heat, som produkten sätter från datan. Den mörkaste tonen slutar där texten fortfarande klarar AAA.

Dag	8	9	10	11	12
Mån	48	112	240	130	22
Tis	35	170	205	101	12

<td data-heat style="--ws-heat: 40%">112</td>
<td data-heat style="--ws-heat: 80%">240</td>

Rader som länkar

Namnet är länken, och länkens yta sträcks över hela raden: raden är målet, och för en skärmläsare är det fortfarande en länk. Andra kontroller i raden går att klicka på ovanför den.

Kund	Webbplatser	Åtgärder
NSR	2
Region Gävleborg	1

<tr>
  <th scope="row"><a class="ws-table__row-link" href="/kunder/nsr">NSR</a></th>
  …
</tr>

Namn på två rader

Ett namn och det det hör till: en webbplats över sin domän, en kund över sin kortform. --mono sätter andra raden som kod, för ett id eller en sökväg.

Göteborgs stadgoteborg.seStartsidan/sv/start

<span class="ws-name">
  <span class="ws-name__main">Göteborgs stad</span>
  <span class="ws-name__sub">goteborg.se</span>
</span>

Ändringar

Vad ett fält var och vad det blev — raden en ändringslogg består av.

Timmar:7,508,00
Kund:tomtWhitespace AB
Not:Uppföljning inför sprintmötettomt
Timpris:dolt — kräver behörighet

<li class="ws-change">
  <span class="ws-change__label">Timmar:</span>
  <span class="ws-change__values">
    <span class="ws-change__from">7,50</span>
    <span class="ws-change__arrow" aria-hidden="true">→</span>
    <span class="ws-change__to">8,00</span>
  </span>
</li>

Jämförelse

--compare: det tidigare värdet är ett värde i sin egen rätt — förra periodens siffra — och stryks inte. Skillnaden kan följa som __delta.

Besök:11 90212 480+4,9 %

<li class="ws-change ws-change--compare">
  <span class="ws-change__label">Besök:</span>
  <span class="ws-change__values">
    <span class="ws-change__from">11 902</span>
    <span class="ws-change__arrow" aria-hidden="true">→</span>
    <span class="ws-change__to">12 480</span>
    <span class="ws-change__delta">+4,9 %</span>
  </span>
</li>

Sammanfattning

Som GOV.UK: svaren att se över innan något skickas, varje rad med en länk för att ändra den. Tre kolumner när listan har plats, staplad när den inte har det.

Projekt: Webbplats 2026; Ändra projekt
Kund: Region Skåne; Ändra kund
Period: 1–30 september 2026; Ändra period
Timmar: 412,5 av 600; Ändra timmar
Skapad av: Linn Svensson

<dl class="ws-summary-list">
  <div class="ws-summary-list__row">
    <dt class="ws-summary-list__key">Projekt</dt>
    <dd class="ws-summary-list__value">Webbplats 2026</dd>
    <dd class="ws-summary-list__actions">
      <a href="#project">Ändra<span class="ws-sr-only"> projekt</span></a>
    </dd>
  </div>
</dl>

Värmekarta

Elva steg, data-heat="0"–"10", satta från datat. Det mörkaste steget är markeringstonen, så siffran har samma färg i alla steg.

Europe/Stockholm	8	9	10	11	12	13	14	15	16	17
Mån	85	105	111	124	98	88	116	88	85	93
Tis	89	88	102	103	100	95	99	82	94	95
Ons	75	12	84	73	79	88	67	78	84	40
Tor	81	84	77	30	73	78	76	80	65	65
Fre	81	97	104	90	87	101	90	89	84	86
Lör			6
Sön		7						6

<table class="ws-table ws-heatmap">
  <tbody><tr><th scope="row">Mån</th><td data-heat="7">85</td>…</tr></tbody>
</table>