TL
Tool Lab
💰Donate
💰Donate

HTML-tabelgenerator

Maak HTML-tabellen met een visuele editor en kopieer de code direct.

HTML-uitvoer
<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Over deze tool

De HTML-tabelgenerator laat u rijen en kolommen instellen, cellen direct bewerken en kant-en-klare HTML-tabelcode krijgen. U kunt headerrijen, randen, gestreepte rijen en celopvulling visueel configureren.

De gegenereerde HTML volgt semantische opmaak met de juiste thead- en tbody-structuur, wat beter is voor toegankelijkheid en schermlezers. De code wordt in realtime bijgewerkt terwijl u bewerkt.

Hoe te gebruiken

  1. Stel het aantal rijen en kolommen in.
  2. Schakel headerrij, rand en gestreepte rijen in/uit met selectievakjes.
  3. Pas de celopvullingswaarde aan.
  4. Klik op een cel om uw inhoud direct te typen.
  5. Kopieer de code onder "HTML-uitvoer" en gebruik deze in uw project.

Gebruiksscenario's

Handig voor gegevensvergelijkingstabellen, prijstabellen, roosters, productspecificatietabellen en alle informatie die in tabelindeling op een webpagina wordt weergegeven.

Veelgestelde vragen

  • Kan ik de tabel zonder CSS opmaken? — Ja. De gegenereerde HTML bevat border-attributen en cellpadding, zodat basisopmaak wordt toegepast zonder CSS.
  • Kan ik colspan of rowspan toevoegen? — Dit gereedschap genereert een basisstructuur voor tabellen. Bewerk de gegenereerde code rechtstreeks om colspan/rowspan-attributen toe te voegen.
  • Hoe maak ik de tabel responsief? — Wikkel de tabel in een div met overflow-x: auto, of gebruik CSS-mediaquery's om horizontaal scrollen op kleine schermen mogelijk te maken.