TL
Tool Lab
💰Donate
💰Donate

HTML-tabellgenerator

Bygg HTML-tabeller med en visuell redigerare och kopiera koden direkt.

HTML-utdata
<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>

Om det här verktyget

HTML-tabellgeneratorn låter dig ställa in rader och kolumner, redigera celler direkt och få redo-att-använda HTML-tabelkod. Du kan visuellt konfigurera rubrikrader, ramar, randiga rader och cellfyllnad.

Den genererade HTML:en följer semantisk märkning med korrekt thead- och tbody-struktur, vilket är bättre för tillgänglighet och skärmläsare. Koden uppdateras i realtid när du redigerar.

Hur man använder

  1. Ange antal rader och kolumner.
  2. Växla rubrikrad, ram och randiga rader med kryssrutor.
  3. Justera värdet för cellfyllnad.
  4. Klicka på en cell för att skriva in ditt innehåll direkt.
  5. Kopiera koden under "HTML-utdata" och använd den i ditt projekt.

Användningsfall

Bra för datajämförelsetabeller, pristabeller, scheman, produktspecifikationstabeller och all information som visas i tabellformat på en webbsida.

Vanliga frågor

  • Kan jag styla tabellen utan CSS? — Ja. Den genererade HTML:en inkluderar border-attribut och cellpadding, så grundläggande stil tillämpas utan CSS.
  • Kan jag lägga till colspan eller rowspan? — Det här verktyget genererar en grundläggande tabellstruktur. Redigera den genererade koden direkt för att lägga till colspan/rowspan-attribut.
  • Hur gör jag tabellen responsiv? — Omslut tabellen i en div med overflow-x: auto, eller använd CSS-mediafrågor för att tillåta horisontell scrollning på små skärmar.