HTML Table Generator
Generate accessible table markup with caption, thead, tbody and scoped header cells from simple comma-separated input.
Accessible table markup from simple comma-separated rows.
Live preview
| Plan | Price | Seats |
|---|---|---|
| Free | $0 | 1 |
| Pro | $12 | 5 |
| Team | $40 | 20 |
<table>
<caption>Pricing</caption>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Price</th>
<th scope="col">Seats</th>
</tr>
</thead>
<tbody>
<tr>
<td>Free</td>
<td>$0</td>
<td>1</td>
</tr>
<tr>
<td>Pro</td>
<td>$12</td>
<td>5</td>
</tr>
<tr>
<td>Team</td>
<td>$40</td>
<td>20</td>
</tr>
</tbody>
</table>About the html table generator
An accessible table needs three things beyond the rows: a caption describing what the data is, th cells for headers rather than styled td, and a scope attribute telling the browser whether a header applies to its column or its row.
With those in place, a screen reader can announce the relevant header as it reads each cell, which is what makes a table navigable without sight.
How to use it
- 1Write a caption describing the table.
- 2Enter the header row, comma separated.
- 3Enter body rows, one per line.
- 4Copy the HTML.
Questions
Why does a table need a caption?
It is the table's accessible name. Screen reader users can list the tables on a page and choose one by its caption.
What does scope do?
It says whether a header cell labels its column or its row, so assistive tech can announce the right header alongside each cell.
Should I use tables for layout?
No. Use CSS grid or flexbox. A layout table announces itself as data to screen readers and confuses the reading order.