ZenovayTools

HTML Table Generator

Generate HTML table code from a visual editor. Add rows and columns, set headers, and style options. Export clean HTML with inline styles or CSS classes.

Rows:3
Columns:4

Border style

Edit Table

How to Use HTML Table Generator

  1. 1Set the number of rows and columns.
  2. 2Click cells to edit their content.
  3. 3Toggle header row and choose border style.
  4. 4Copy the generated HTML table code.
Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

Related Tools

CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

What is the basic HTML table structure?▾
<table>: wrapper element. <thead>: table head section (optional but recommended). <tbody>: table body. <tfoot>: table footer (optional). <tr>: table row (inside thead, tbody, or tfoot). <th>: table header cell — bold and centered by default, has scope attribute. <td>: table data cell. Example: <table><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>.
How do I add borders to HTML tables?▾
The HTML border attribute is deprecated. Use CSS: table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }. border-collapse: collapse makes adjacent borders merge into one; border-collapse: separate (default) keeps separate borders. For striped rows: tr:nth-child(even) { background: #f9f9f9; }. For hover: tr:hover { background: #f0f0f0; }.
What are colspan and rowspan?▾
colspan: how many columns a cell spans. rowspan: how many rows a cell spans. Example: <td colspan="2">spans 2 columns</td>. Used for merged cells, like a header covering multiple columns or a cell covering multiple rows. When using colspan/rowspan, the spanned cells are removed from the HTML — the table still renders correctly. Most spreadsheet-to-HTML converters handle this automatically.
How do I make HTML tables accessible?▾
Add scope to header cells: <th scope="col">Column</th> or <th scope="row">Row header</th>. Use <caption> for the table title. Add id/headers attributes for complex tables: <th id="h1">Name</th>, <td headers="h1">Alice</td>. Use role="table" for non-table HTML elements used as tables. Avoid using tables for layout — use CSS Grid or Flexbox instead. Screen readers announce the column/row count and navigate by cell with arrow keys.
How do I make HTML tables responsive?▾
Wrap in a scrollable container: <div style="overflow-x:auto"><table>...</table></div>. This allows horizontal scrolling on small screens. More advanced techniques: hide less important columns on mobile with CSS (display:none at a breakpoint), use data-label attributes + CSS to show labels when columns collapse, or convert to cards on mobile: table { width:100% } td { display:block; } td::before { content:attr(data-label); }. Libraries like DataTables handle responsive behavior automatically.