HTML Table Generator

How to generate an HTML table

1. Fill in the grid. Use Add row, Add column, Remove last row and Remove last column, or the × buttons next to each row and column. New empty table starts again from a blank 3 × 3 grid.
2. To reuse existing data, paste CSV or cells copied from Excel, LibreOffice or Google Sheets into Import CSV or spreadsheet data, check the Delimiter and click Import. You can also paste a block of spreadsheet cells straight into any grid cell.
3. Add a Caption and choose whether First row is a header row and First column is a header column.
4. Under Styling, pick No styles, CSS class or Inline styles, and adjust the Border color, Header background and Striped rows if you want.
5. Check the Preview, then click Copy HTML or download the code as an .html file.

Accessible table markup

A table is only accessible when screen readers can tell which cells are headers and what they describe. This tool writes the structure that the HTML standard and the WCAG techniques recommend:

• <caption> gives the table a name. Screen readers announce it when entering the table, and it helps every reader understand what they are looking at. Keep it short and descriptive.
• <thead> and <tbody> separate the header row from the data rows. Browsers can repeat the <thead> on every printed page.
• <th scope="col"> marks each column header, and with First column is a header column, <th scope="row"> marks the first cell of each row. When a screen reader user moves to a data cell, it can read the matching headers aloud, such as “Pro, Price, $12”.

Use tables for tabular data only, never for page layout. Avoid merged cells when you can: simple grids with one header row and, if needed, one header column are the easiest to read with assistive technology.

Styling options

• No styles writes plain markup that inherits your site’s table styles. It is the best choice for a CMS or a site with a design system.
• CSS class adds class="…" to the <table> and shows a matching block of CSS to paste into your stylesheet. The Class name is cleaned to letters, digits, hyphens and underscores so it is always a valid selector.
• Inline styles puts style attributes on every element. It is verbose, but it is what HTML emails need, since many email clients ignore <style> blocks. The Download button adds the CSS in a <style> element when you use a class.

Only real hexadecimal colors from the color pickers are written into the CSS, so nothing unexpected can end up in your styles.

Escaping and safety

Every cell is escaped: <, > and & become <, > and &, so text such as <b> or a < b appears exactly as typed instead of being interpreted as markup. Line breaks inside imported cells become <br>. The preview is built only from this escaped markup and passes through a sanitizer that keeps table elements alone, so a pasted script can never run.