Generate HTML table

Generate semantic HTML tables with headers, rows, captions, and cell spans.

freeworks offlinenothing uploaded
ToolHTML Table Generator
Input
Output
—

How it works

Headers, rows, and cells become table, thead, tbody, th, and td elements with optional caption, scope, and spans. Spans alter the table grid and are checked for overlapping placements.

  • Semantic headers improve accessibility.
  • thead and tbody support styling and navigation.

Worked example

Product inventory table
Create a bordered HTML table with custom headers and product data
Input
											Rows: 2
Columns: 3
Headers: Product,Price,Stock
Data: Widget,$9.99,150
Gadget,$24.99,42
Include head: true
Include body: true
Bordered: true
Striped: false
Output
												<table style="border-collapse: collapse">
  <thead>
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left">Product</th>
      <th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left">Price</th>
      <th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px">Widget</td>
      <td style="border: 1px solid #ddd; padding: 8px">$9.99</td>
      <td style="border: 1px solid #ddd; padding: 8px">150</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding…

When to use this

Reports, comparison docs, and admin exports generate HTML tables.

Edge cases

  • rowspan can leave missing cells later.
  • colspan changes grid width.
  • Headers without scope are harder for assistive technology to associate.

References