HTML-tabelgenerator

Sådan genererer du en HTML-tabel

1. Udfyld gitteret. Brug Tilføj række, Tilføj kolonne, Fjern sidste række og Fjern sidste kolonne eller ×-knapperne ved siden af hver række og kolonne. Ny tom tabel starter forfra med et tomt gitter på 3 × 3.
2. For at genbruge eksisterende data indsætter du CSV eller celler kopieret fra Excel, LibreOffice eller Google Sheets i Importér CSV- eller regnearksdata, tjekker Skilletegn og klikker på Importér. Du kan også indsætte en blok af regnearksceller direkte i en vilkårlig celle i gitteret.
3. Tilføj en Billedtekst, og vælg, om Første række er en overskriftsrække og Første kolonne er en overskriftskolonne.
4. Under Typografi vælger du Ingen typografi, CSS-klasse eller Indlejret typografi og justerer eventuelt Kantfarve, Baggrund for overskrift og Rækker med striber.
5. Tjek Forhåndsvisning, og klik derefter på Kopiér HTML eller download koden som en .html-fil.

Tilgængelig tabelmarkup

En tabel er kun tilgængelig, når skærmlæsere kan se, hvilke celler der er overskrifter, og hvad de beskriver. Dette værktøj skriver den struktur, som HTML-standarden og WCAG-teknikkerne anbefaler:

• <caption> giver tabellen et navn. Skærmlæsere oplæser det, når man går ind i tabellen, og det hjælper enhver læser med at forstå, hvad man ser på. Hold det kort og beskrivende.
• <thead> og <tbody> adskiller overskriftsrækken fra datarækkerne. Browsere kan gentage <thead> på hver udskrevet side.
• <th scope="col"> markerer hver kolonneoverskrift, og med Første kolonne er en overskriftskolonne markerer <th scope="row"> den første celle i hver række. Når en skærmlæserbruger flytter til en datacelle, kan den læse de tilhørende overskrifter højt, for eksempel »Pro, Pris, 12 kr.«.

Brug kun tabeller til tabeldata, aldrig til sidens layout. Undgå sammenflettede celler, når det er muligt: Enkle gitre med én overskriftsrække og om nødvendigt én overskriftskolonne er lettest at læse med hjælpeteknologi.

Typografivalg

• Ingen typografi skriver almindelig markup, der arver dit websteds tabeltypografi. Det er det bedste valg til et CMS eller et websted med et designsystem.
• CSS-klasse tilføjer class="…" til <table> og viser en tilsvarende blok CSS, du kan indsætte i dit stylesheet. Klassenavn renses til bogstaver, cifre, bindestreger og understregninger, så det altid er en gyldig vælger.
• Indlejret typografi sætter style-attributter på hvert element. Det er langhåret, men det er det, HTML-e-mails har brug for, da mange e-mailklienter ignorerer <style>-blokke. Knappen Download tilføjer CSS’en i et <style>-element, når du bruger en klasse.

Kun ægte hexadecimale farver fra farvevælgerne skrives ind i CSS’en, så der ikke kan havne noget uventet i din typografi.

Kodning og sikkerhed

Hver celle kodes: <, > og & bliver til <, > og &, så tekst som <b> eller a < b vises præcis, som den er skrevet, i stedet for at blive fortolket som markup. Linjeskift i importerede celler bliver til <br>. Forhåndsvisningen bygges kun ud fra denne kodede markup og går gennem en rensning, der kun beholder tabelelementer, så et indsat script aldrig kan køre.