HTML Table Generator

Generate HTML table code from rows and columns. First row is used as header.

Back to all tools on ToolForge

More in Developer Tools

Rows: Columns:

Table Data

Enter content for each cell. First row will become table headers.

Output

About HTML Table Generator

This HTML Table Generator creates table markup from your data. Enter values per cell; the first row becomes the header using <th> elements. Subsequent rows use <td> data cells.

It is useful for quickly scaffolding tables for documentation, email HTML, data exports, and creating accessible table structures without manually writing markup.

HTML Table Structure

<!-- Basic table structure -->
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Recommended CSS Styling

/* Modern table styling */
table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

/* Responsive tables */
@media screen and (max-width: 600px) {
  table {
    font-size: 14px;
  }
}

Table Attributes Reference

AttributePurposeExample
colspanSpan cell across columns<td colspan="2">
rowspanSpan cell across rows<td rowspan="3">
scopeHeader scope (accessibility)<th scope="col">
headersAssociate cell with headers<td headers="h1 h2">
captionTable title/description<caption>Sales Data</caption>

Accessible Table Example

<table>
  <caption>Monthly Sales Report 2024</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,000</td>
      <td>20%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$22,000</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

Complex Table with Merged Cells

<table>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Q1 2024</th>
      <th colspan="2">Q2 2024</th>
    </tr>
    <tr>
      <th>Sales</th>
      <th>Profit</th>
      <th>Sales</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$5,000</td>
      <td>$1,000</td>
      <td>$6,000</td>
      <td>$1,200</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>$3,000</td>
      <td>$600</td>
      <td>$4,000</td>
      <td>$800</td>
    </tr>
  </tbody>
</table>

Frequently Asked Questions

What is the basic structure of an HTML table?
An HTML table uses as the container, for header rows, for body rows, for each row, , , for structure. Avoid using tables for layout. Ensure sufficient color contrast. Test with screen readers.
What is colspan and rowspan?
colspan merges cells horizontally across multiple columns. rowspan merges cells vertically across multiple rows. Example:
for header cells, and for data cells. Example:
Name
Data
.
What is the difference between th and td?
 (table header) cells are for column/row headers and are bold and centered by default. (table data) cells contain regular data. Screen readers treat th elements as headers, improving accessibility. Always use th for headers, not just for styling.
How do I make tables accessible?
Use
for headers with scope attribute (scope="col" or scope="row"). Add
for table description. Use
spans 2 columns, spans 3 rows. Useful for complex table layouts and grouped headers.
Should I use border attribute for styling?
No, the border attribute is deprecated. Use CSS for table styling: border-collapse, border-spacing, padding, background colors. Example: table { border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; }. Separates presentation from structure.
When should I use tables vs other layouts?
Use tables for tabular data (spreadsheets, schedules, comparison charts). Don't use tables for page layout (use CSS Grid/Flexbox instead). Tables should present data relationships, not control visual layout. Screen readers expect tables to contain data.