Build HTML tables visually — set rows, columns, headers, alignment and styling, then copy the generated HTML or preview it live. No coding required.
Choose the number of rows and columns using the controls. Add headers in the first row and enter cell content directly in the visual grid editor.
Choose border style, header background colour, cell padding, text alignment and whether to include a caption. Toggle striped rows and hover effects.
The generated HTML updates live as you type. Click Copy HTML to grab the code, or view the rendered table in the live preview panel on the right.
It generates valid, clean HTML table markup — including the <table>, <thead>, <tbody>, <tr>, <th> and <td> elements with proper nesting. The output is production-ready HTML that can be pasted into any CMS, email builder, web page or HTML editor. Inline styles are optionally included for border, padding, background colours and text alignment so the table renders correctly without needing an external stylesheet.
Yes — the first row can be marked as headers, which wraps cells in <th> elements and applies bold formatting automatically. Each column's text alignment (left, centre, right) is configurable independently, applied as a text-align style. Headers can have a custom background colour and font colour to distinguish them visually from body rows.
Yes — you can mark any cell to span multiple columns (colspan) or multiple rows (rowspan). The visual editor updates the grid to show merged cells highlighted, and the generated HTML includes the correct colspan and rowspan attributes. This is useful for summary rows, grouped headers and table sections that share a label across multiple data rows.
Yes — there is a Caption field. When filled in, a <caption> element is added directly below the opening <table> tag. Captions are important for accessibility (screen readers announce them before reading the table), SEO (Google can extract table summaries from captions), and general usability for complex data tables.
The generator produces accessible table HTML by default: <th> elements have scope attributes (scope="col" for column headers, scope="row" for row headers), the optional caption is generated as a proper <caption> element, and the table has a role="table" structure. These attributes allow screen readers to announce column and row context when navigating cells — critical for complex data tables.
Yes — HTML tables are the standard layout method for email clients (Gmail, Outlook, Apple Mail) because email clients have very limited CSS support. The generator produces table-based layouts with inline styles that render correctly across email clients. For email use, set cellpadding and cellspacing to 0, use inline styles only, and avoid CSS properties that email clients do not support (like flexbox or grid).
Yes — paste comma-separated values (CSV) or tab-separated values (TSV, from Excel/Google Sheets) into the CSV Import field and click Import. The tool automatically creates the correct number of rows and columns, and populates all cells with your data. Column headers from the first row are detected and placed in <th> elements. This is the fastest way to convert spreadsheet data to HTML.
You can choose from: solid (a standard single border), double, dashed, dotted, or none (no borders at all — useful for layout tables). Border width is configurable from 1px to 4px, and border colour can be set with the colour picker. The collapse-borders option (border-collapse: collapse) is enabled by default so adjacent cell borders do not double up.
Yes — HTML table elements (<table>, <tr>, <td>, <th>) are the most universally supported elements in HTML. They render identically in every browser including Internet Explorer 6+ (if that is a concern), all versions of Chrome, Firefox, Safari and Edge. The generated inline styles use only CSS properties with 100% browser support. No JavaScript is required to display the table.
Yes — enabling the Striped Rows option applies alternating background colours to odd and even rows using inline styles on each <tr>. This makes large data tables much easier to read by helping the eye track across rows. You can customise both the primary and alternate row colours. For dynamic tables rendered in JavaScript, use the CSS nth-child(odd) selector instead for cleaner code.