Softonic

HTML-tabelgenerator

Stap 1 / 4

CSV-velden tussen aanhalingstekens, tabs uit spreadsheets, puntkomma-gescheiden rijen en Markdown-scheidingsregels worden ondersteund. Maximaal 50 rijen, 20 kolommen en 1.000 tekens per cel.

Tabelgegevens
Tabelgegevens

Handmatig het invoeren van <table>, <thead>, <tbody> en <tr> voor een dataset met tien rijen is tijdrovend. Plaats tab-gescheiden gegevens uit een CSV- of Markdown-tabel; deze generator genereert goed gestructureerde HTML met semantische tags, optioneel <caption>, juiste scope-attributen en een keuze uit zebra-stripping, randen of Tailwind-klasse-indeling – direct bruikbaar in een artikel of dashboard.

Hoe bouwt u een HTML-tabel?

  1. 1

    Plak uw gegevens

    Zowel TSV (kopie uit een spreadsheet), CSV als Markdown-tabelsyntaxis worden correct verwerkt.

  2. 2

    Kies tabelopties

    Koprij, bijschrift, zebrastreping, compacte of ruime rijen.

  3. 3

    Kies een stijlmodus

    Gewone HTML, inline-stijlen, Bootstrap-klassen of Tailwind-klassen.

  4. 4

    Kopieer de opmaak

    Het resultaat is geldige, semantische HTML – geen `<div>`-raster dat zich voordoet als een tabel.

Semantische tabelstructuur

Tabellen die met de juiste tags zijn opgebouwd, zijn toegankelijk, geschikt voor schermlezers en eenvoudig te stylen. De generator genereert deze structuur:

<table>
  <caption>Verkoopcijfers 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>

Elementen en hun rollen

Element Doel
<caption> Samenvatting van de tabel; eerst te lezen door schermlezers
<thead> Kolomkoppen, los van de tabelinhoud weergegeven
<tbody> Gegevensrijen
<tfoot> Totaalwaarden en voetnoten worden onderaan weergegeven, onafhankelijk van de positie van de code
<th scope="col"> Kolomkop
<th scope="row"> Rijkop (bijvoorbeeld de eerste cel van elke rij)
<td> Gegevenscel

Responsieve patronen

  • Horizontaal scrollen: verpak de tabel in <div style="overflow-x:auto"> zodat smalle weergavevensters kunnen scrollen zonder dat de lay-out breekt.
  • Stapelen op mobiel: herhaal de koppen als data-label-attributen en zet rijen met CSS om in verticale kaarten, geschikt voor kleine datasets.
  • Herschikken met grid: complexe tabellen kunnen worden herbouwd met CSS Grid, maar verliezen dan de native toetsenbordnavigatie; alleen nuttig voor dashboards.

Controlelijst voor toegankelijkheid

  • Elk <th> heeft het attribuut scope.
  • Voor complexe samengevoegde cellen gebruik je headers="..." om gegevenscellen te koppelen aan header-ID’s.
  • Een bijschrift vat het doel van de tabel samen.
  • Gebruik geen tabellen voor visuele lay-out; gebruik in plaats daarvan CSS Grid of Flexbox.

Veelgestelde vragen

Ja. De klembordgegevens uit een spreadsheet zijn in TSV-indeling (tabgescheiden), die de generator native verwerkt. De rijen worden <tr> en de tabgescheiden cellen worden <td>.

CSS-klassen voor alles wat je zelf beheert; inline-stijlen voor e-mails (waar externe stylesheets vaak worden geblokkeerd). De Bootstrap- en Tailwind-modi leveren direct bruikbare klasse-opmaak voor deze frameworks.

Niet automatisch. Elke geïmporteerde waarde wordt één cel. Voeg na het kopiëren van de HTML zelf colspan of rowspan toe en controleer de koppeling met koppen, want samengevoegde cellen kunnen id- en headers-attributen vereisen.

Ja – de attributen scope="col" en scope="row" worden toegevoegd, en er wordt een <caption> gegenereerd wanneer je er een opgeeft. Controleer complexe tabellen met een schermlezer of de axe DevTools-extensie.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen