HTML Table Generator

Tips for clean HTML tables

Use <thead> for real header rows, <tbody> for records and a useful caption when the table purpose is not already clear from context.

For very wide tables, a responsive wrapper is useful. The actual table cells remain semantically clean and can be styled separately with CSS.

Semantics and accessibility

An HTML table is for related data, not for general page layout. With a header row enabled, the generator creates <thead> and <tbody>. The first row is emitted as <th>; the scope="col" option makes the column-header relationship explicit.

A caption describes the table's purpose when the surrounding text does not already make it clear. The generator does not create a <tfoot>, row headers, or multi-level header matrices. Add those manually for totals, complex tables, or scope="row" relationships. Semantic elements help accessibility, but they do not replace a review of the actual content.

Escaping, preview, and safe output

Escape cell HTML is enabled by default. It escapes values such as &, <, >, quotes, and apostrophes in cells and attribute values. A value such as <b>Test</b> therefore remains text instead of becoming bold markup.

The preview inserts cell and caption values as text into DOM elements regardless of this option. A test value such as <script>alert(1)</script> therefore does not execute in the preview. If escaping is disabled, the generator intentionally writes the input as raw HTML in the generated code. Use that option only for trusted, deliberate markup and review the code before embedding it in a website.

CSV parsing and limits

• Select semicolon, comma, tab, or pipe; with “Automatic”, the tool evaluates the first data lines.
• Double quotes and a delimiter inside a quoted field are handled within one data line.
• A quoted field spanning multiple physical lines is not supported as a complete multi-line CSV record.
• Uneven rows are padded to the largest column count. Empty rows can be skipped and cell whitespace can be trimmed automatically.
• Input is processed as browser text; automatic charset detection and full RFC 4180 validation are outside the tool's scope.

The form builder currently allows up to 12 columns and 30 rows. Pasted data has no matching form limit, but very large tables remain unpaginated and unfiltered. For large datasets, consider pagination, search, or a dedicated table component.

Reproducible examples

A small semantic table with a caption and column headers is conceptually:

<table>
   <caption>Team status</caption>
   <thead>
      <tr><th scope="col">Name</th><th scope="col">Status</th></tr>
   </thead>
   <tbody>
      <tr><td>Ada</td><td>Active</td></tr>
   </tbody>
</table>

Also test <b>Test</b> with escaping enabled and disabled, a table with uneven row lengths, and a wide table in the responsive wrapper. Then check preview, output, copy, and download.

Further reading: HTML Standard: tables and MDN: HTML tables.