HTML Table Builder

Build accessible HTML, Tailwind CSS, or Markdown tables visually with live cell editing and presets.

Table Presets:

Rows4

Columns4

Total Cells16

Code Chars894

Table Options

Caption (Accessibility / SEO)

Show BordersZebra Striping

Grid Controls (4 × 4)

Selected Cell [1, 1]

Make Header Cell (<th>)

Text Alignment

Colspan

Rowspan

Visual Interactive GridClick any cell to edit or format

Generated Output

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
  <tr>
    <th style="background:#f1f5f9;font-weight:bold">Plan</th>
    <th style="background:#f1f5f9;font-weight:bold">Price</th>
    <th style="background:#f1f5f9;font-weight:bold">Storage</th>
    <th style="background:#f1f5f9;font-weight:bold">Support</th>
  </tr>
  <tr>
    <td style="background:#f8fafc">Starter</td>
    <td style="background:#f8fafc">$9/mo</td>
    <td style="background:#f8fafc">10 GB</td>
    <td style="background:#f8fafc">Community</td>
  </tr>
  <tr>
    <td>Professional</td>
    <td>$29/mo</td>
    <td>100 GB</td>
    <td>Priority</td>
  </tr>
  <tr>
    <td style="background:#f8fafc">Enterprise</td>
    <td style="background:#f8fafc">$99/mo</td>
    <td style="background:#f8fafc">1 TB</td>
    <td style="background:#f8fafc">24/7 Dedicated</td>
  </tr>
</table>

Semantic HTML & Accessible Table Structure

Creating semantic HTML tables requires proper use of structural elements such as <table>, <tr>, <th> (header cells), and <td> (data cells). Providing a descriptive <caption>element ensures screen reader users can understand the table's context before reading cell data. The colspan and rowspan attributes enable multi-cell spans for complex data grids.

Built and maintained by Meet Shah · Last updated 1 August 2026

What this tool is used for

Building a table visually and copying the markup.
Setting column alignment without hand-editing every cell.
Adding a row or a column without realigning the rest.
Producing a table for a page or a CMS field.
Getting a well-formed table with proper header cells.

Frequently Asked Questions

What output formats can I generate?: Plain semantic HTML, a Tailwind-classed version, and GitHub-flavoured Markdown. The same grid drives all three, so you can build once and take whichever form the destination wants.
Do colspan and rowspan work in every format?: In the HTML and Tailwind output, yes — they are emitted as real attributes. Markdown pipe tables have no concept of spanning cells, so that format flattens them; use HTML output if merged cells matter.
How is column alignment expressed?: As a text-align class in the HTML output and as the colon markers in the Markdown separator row — `:---:` for centre, `---:` for right. Alignment is a property of the header cell, which is what the Markdown format assumes.
Why should I add a caption?: A `<caption>` is the accessible name of the table: screen-reader users listing tables on a page hear it, and it stays associated with the table when a heading above it does not. It is also the only label that survives when the table is read out of document order.
Is a header row required?: Not technically, but a table without `<th>` cells gives assistive technology nothing to announce when reading a data cell, so every cell is stated without context. Any table carrying data rather than layout should mark its first row as headers.
Can I paste an existing table in?: This builder starts from presets or a blank grid rather than importing markup. To go the other direction from an existing table, the HTML-table-to-JSON and HTML-table-to-CSV tools parse real markup and hand back structured data.

Common errors and gotchas

Using styled data cells instead of header cells, which loses the table's meaning for screen readers.
Omitting a caption or a summary, which leaves the table unexplained.
Using a table for layout, which is what CSS is for.
Building a table too wide for the page without a scrolling container.
Merging cells in a way that breaks the header-to-data relationship.