HTML-tabellgenerator

Så skapar du en HTML-tabell

1. Fyll i rutnätet. Använd Lägg till rad, Lägg till kolumn, Ta bort sista raden och Ta bort sista kolumnen, eller ×-knapparna bredvid varje rad och kolumn. Ny tom tabell börjar om från ett tomt rutnät på 3 × 3.
2. För att återanvända befintliga data klistrar du in CSV eller celler kopierade från Excel, LibreOffice eller Google Sheets under Importera CSV eller data från kalkylblad, kontrollerar Avgränsare och klickar på Importera. Du kan också klistra in ett block med celler från ett kalkylblad direkt i valfri cell i rutnätet.
3. Lägg till en Tabellrubrik och välj om Första raden är en rubrikrad och Första kolumnen är en rubrikkolumn.
4. Under Stil väljer du Inga stilar, CSS-klass eller Inline-stilar, och justerar vid behov Kantfärg, Rubrikbakgrund och Randiga rader.
5. Titta på Förhandsvisning och klicka sedan på Kopiera HTML, eller ladda ner koden som en .html-fil.

Tillgänglig tabellkod

En tabell är bara tillgänglig när skärmläsare kan avgöra vilka celler som är rubriker och vad de beskriver. Verktyget skriver den struktur som HTML-standarden och WCAG-teknikerna rekommenderar:

• <caption> ger tabellen ett namn. Skärmläsare läser upp det när användaren kommer till tabellen, och det hjälper alla läsare att förstå vad de tittar på. Håll det kort och beskrivande.
• <thead> och <tbody> skiljer rubrikraden från dataraderna. Webbläsare kan upprepa <thead> på varje utskriven sida.
• <th scope="col"> markerar varje kolumnrubrik, och med Första kolumnen är en rubrikkolumn markerar <th scope="row"> den första cellen i varje rad. När en skärmläsaranvändare går till en datacell kan rubrikerna läsas upp, till exempel ”Pro, Pris, 12 kr”.

Använd bara tabeller för data i tabellform, aldrig för sidlayout. Undvik sammanslagna celler när det går: enkla rutnät med en rubrikrad och vid behov en rubrikkolumn är lättast att läsa med hjälpmedel.

Stilalternativ

• Inga stilar skriver ren märkkod som ärver webbplatsens tabellstilar. Det är det bästa valet för ett CMS eller en webbplats med ett designsystem.
• CSS-klass lägger till class="…" på <table> och visar ett matchande CSS-block att klistra in i din stilmall. Klassnamn rensas till bokstäver, siffror, bindestreck och understreck så att det alltid är en giltig selektor.
• Inline-stilar sätter style-attribut på varje element. Det blir ordrikt, men det är vad HTML-e-post behöver, eftersom många e-postprogram ignorerar <style>-block. Knappen Ladda ner lägger till CSS-koden i ett <style>-element när du använder en klass.

Bara riktiga hexadecimala färger från färgväljarna skrivs in i CSS-koden, så inget oväntat kan hamna i dina stilar.

Kodning och säkerhet

Varje cell kodas: <, > och & blir <, > och &, så text som <b> eller a < b visas exakt som du skrev den i stället för att tolkas som märkkod. Radbrytningar i importerade celler blir <br>. Förhandsvisningen byggs bara av den kodade märkkoden och passerar genom en sanerare som bara släpper igenom tabellelement, så ett inklistrat skript kan aldrig köras.