HTML-tabellgenerator

Slik lager du en HTML-tabell

1. Fyll ut rutenettet. Bruk Legg til rad, Legg til kolonne, Fjern siste rad og Fjern siste kolonne, eller ×-knappene ved siden av hver rad og kolonne. Ny tom tabell starter på nytt fra et tomt 3 × 3-rutenett.
2. For å bruke eksisterende data limer du inn CSV eller celler kopiert fra Excel, LibreOffice eller Google Sheets i Importer CSV- eller regnearkdata, kontrollerer Skilletegn og klikker Importer. Du kan også lime en blokk med regnearkceller rett inn i en hvilken som helst celle i rutenettet.
3. Legg til en Tittel (caption) og velg om Første rad er en overskriftsrad og Første kolonne er en overskriftskolonne.
4. Under Stil velger du Ingen stiler, CSS-klasse eller Innebygde stiler, og justerer Kantfarge, Bakgrunn for overskrift og Stripete rader om du vil.
5. Sjekk Forhåndsvisning, og klikk deretter Kopier HTML eller last ned koden som en .html-fil.

Tilgjengelig tabellkode

En tabell er bare tilgjengelig når skjermlesere kan se hvilke celler som er overskrifter og hva de beskriver. Dette verktøyet skriver strukturen som HTML-standarden og WCAG-teknikkene anbefaler:

• <caption> gir tabellen et navn. Skjermlesere leser det opp når du kommer inn i tabellen, og det hjelper alle lesere å forstå hva de ser på. Hold det kort og beskrivende.
• <thead> og <tbody> skiller overskriftsraden fra datarader. Nettlesere kan gjenta <thead> på hver utskrevne side.
• <th scope="col"> markerer hver kolonneoverskrift, og med Første kolonne er en overskriftskolonne markerer <th scope="row"> den første cellen i hver rad. Når en skjermleserbruker går til en datacelle, kan skjermleseren lese opp de tilhørende overskriftene, for eksempel «Pro, Pris, 12 kr».

Bruk tabeller bare til tabelldata, aldri til sideoppsett. Unngå sammenslåtte celler når du kan: enkle rutenett med én overskriftsrad og eventuelt én overskriftskolonne er lettest å lese med hjelpemidler.

Stilvalg

• Ingen stiler skriver ren kode som arver tabellstilene på nettstedet ditt. Det er det beste valget for et CMS eller et nettsted med et designsystem.
• CSS-klasse legger til class="…" på <table> og viser en tilhørende CSS-blokk du kan lime inn i stilarket ditt. Klassenavn renses til bokstaver, sifre, bindestreker og understreker, slik at det alltid er en gyldig velger.
• Innebygde stiler setter style-attributter på alle elementer. Det blir langt, men det er det HTML-e-poster trenger, siden mange e-postklienter ignorerer <style>-blokker. Knappen Last ned legger CSS-en i et <style>-element når du bruker en klasse.

Bare ekte heksadesimale farger fra fargevelgerne skrives inn i CSS-en, så ingenting uventet kan havne i stilene dine.

Escaping og sikkerhet

Hver celle escapes: <, > og & blir <, > og &, så tekst som <b> eller a < b vises nøyaktig slik den er skrevet, i stedet for å bli tolket som kode. Linjeskift i importerte celler blir <br>. Forhåndsvisningen bygges bare av denne escapede koden og går gjennom en sanitizer som bare beholder tabellelementer, så et innlimt skript kan aldri kjøre.