Skip to main content
PUBLIC.INTERNET
⚡ Acesso Instantaneo🔒 Privacidade em Primeiro🆓 Sempre Gratuito📱 Funciona em Todo Lugar

Accessible Data Table Builder

A data table is only accessible if its header cells are marked up so a screen reader can tie each value back to its row and column. That means real <th> elements with a scope of col or row, a <caption> that names the table, and a clean <thead>/<tbody> split. Most visual editors and spreadsheet exports emit a wall of <td> with no headers at all, which leaves screen reader users hearing numbers with no context. Paste your data as TSV or CSV (one row per line), set a Caption, and choose a Header pattern: column headers in the first row, row headers in the first column, or both for a matrix. The tool builds the semantic markup, shows a live Preview of the rendered table, and gives you copy-ready HTML. It handles uneven rows by padding them, escapes special characters, and uses scope="col" and scope="row" in the right places so the association is unambiguous.

Preview

HTML

How to Build an Accessible Table
  1. Name the table - Type a short summary in Caption so the table has a programmatic title.
  2. Choose the header pattern - Pick column headers, row headers, or both in Header pattern to match how your data is organized.
  3. Paste your data - Drop TSV or CSV into the Data box, one row per line; the first row or column becomes the headers based on your pattern.
  4. Check the preview - Confirm the right cells are bold headers in the Preview, which renders the exact scope markup.
  5. Copy the HTML - Click Copy HTML to grab the semantic table with caption and scoped headers.
Why This Tool?
 The advice for accessible tables lives in tutorials from MDN, WebAIM, and the W3C, and they all say the same thing: most authoring tools do not output decent header markup, so you have to write it by hand. That is the gap. Paste-and-go beats hand-coding scope on every header, and it beats a generic table generator that only cares about borders and striping. The output here is judged on whether a screen reader can navigate it, not on how it looks. 
 The mechanics that matter: scope="col" says a header labels everything beneath it, scope="row" says it labels everything across its row, and a matrix needs both so the cell at the intersection is announced with its row and column header together. A <caption> is the table's accessible name and should be a real caption element, not a paragraph above the table. A practical tip: for genuinely complex tables with split or spanning headers, the simple scope model is not enough and you move to id and headers attributes, but the vast majority of data tables only need the scoped headers this tool produces.