Softonic

HTML-tabellgenerator

Steg 1 / 4

CSV-fält inom citattecken, tabbar från kalkylblad, semikolonseparerade rader och Markdown-avdelare stöds. Högst 50 rader, 20 kolumner och 1 000 tecken per cell.

Tabelldata
Tabelldata

Att skriva <table>, <thead>, <tbody> och <tr> för hand för en datamängd med tio rader är tidsödande. Klistra in tabelldata i tabb-separerat, CSV- eller Markdown-format, så skapar generatorn välstrukturerad HTML med semantiska taggar, valfri <caption>, korrekta scope-attribut och ett val av zebrarandning, ramar eller Tailwind-klasser – redo att lägga in i en artikel eller en instrumentpanel.

Så skapar du en HTML-tabell

  1. 1

    Klistra in dina data

    TSV (kopierat från ett kalkylblad), CSV eller Markdown-tabellsyntax tolkas alla korrekt.

  2. 2

    Välj tabellalternativ

    Rubrikrad, bildtext, zebrarandning, kompakta eller luftiga rader.

  3. 3

    Välj stilläge

    Vanlig HTML, inline-stilar, Bootstrap-klasser eller Tailwind-klasser.

  4. 4

    Kopiera markupen

    Resultatet är giltig, semantisk HTML – inte ett `<div>`-rutnät som utger sig för att vara en tabell.

Semantisk tabellstruktur

Tabeller som byggs med rätt taggar är tillgängliga, fungerar bra med skärmläsare och är enkla att styla. Generatorn skapar följande struktur:

<table>
  <caption>Försäljningssiffror Q1</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Element och deras roller

Element Syfte
<caption> Sammanfattning av tabellen, läses först av skärmläsare
<thead> Kolumnrubriker, renderas separat från tabellkroppen
<tbody> Datarader
<tfoot> Summor och fotnoter placeras längst ner oavsett kodposition
<th scope="col"> Kolumnrubrik
<th scope="row"> Radhuvud (t.ex. första cellen i varje rad)
<td> Datacell

Responsiva mönster

  • Horisontell rullning: linda tabellen i <div style="overflow-x:auto"> så att smala vyer kan rullas i stället för att bryta layouten.
  • Stapla på mobil: upprepa rubrikerna som data-label-attribut och gör om raderna till vertikala kort med CSS – lämpligt för små datamängder.
  • Omflöde med rutnät: komplexa tabeller kan byggas om med CSS Grid, men förlorar den inbyggda tangentbordsnavigeringen; endast värt det för instrumentpaneler.

Tillgänglighetsgranskningslista

  • Varje <th> har attributet scope.
  • Komplexa spannor använder headers="..." för att koppla dataceller till huvud-ID:er.
  • En beskrivning sammanfattar tabellens syfte.
  • Använd inte tabeller för visuell uppdelning – använd istället CSS Grid eller Flexbox.

Vanliga frågor

Ja. Data i urklipp från kalkylblad är i TSV-format (separerat med tabb), vilket generatorn tolkar direkt. Rader blir <tr> och tabb-separerade celler blir <td>.

CSS-klasser för allt du styr själv; inline-stilar för e-post (där externa stilmallar ofta blockeras). Bootstrap- och Tailwind-lägena genererar färdig klassmarkup för dessa ramverk.

Inte automatiskt. Varje importerat värde blir en egen cell. Lägg själv till colspan eller rowspan efter att du har kopierat HTML-koden och kontrollera kopplingen till rubrikerna, eftersom sammanslagna celler kan kräva attributen id och headers.

Ja – attributen scope="col" och scope="row" läggs till, och en <caption> genereras när du anger en sådan. Kontrollera komplexa tabeller med en skärmläsare eller tillägget axe DevTools.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.