HTML Table Generator

Create a styled, accessible HTML table and copy the code.

Body rows (empty data)

3

Columns (empty data)

3

Cell padding

8px

HTML
<table class="data-table">
  <caption>Pricing plans</caption>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
      <th scope="col">Storage</th>
      <th scope="col">Support</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
      <td>5 GB</td>
      <td>Community</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$9</td>
      <td>100 GB</td>
      <td>Email</td>
    </tr>
    <tr>
      <td>Team</td>
      <td>$29</td>
      <td>1 TB</td>
      <td>Priority</td>
    </tr>
  </tbody>
</table>
CSS
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-family: system-ui, sans-serif;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #dddddd;
}

.data-table thead th {
  background: #d10505;
  color: #ffffff;
}

.data-table tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.data-table caption {
  caption-side: top;
  padding: 8px;
  font-weight: 600;
}

HTML Table Generator

Tables are still the right tool for tabular data — price comparisons, schedules, specifications, statistics and changelogs. Writing the markup by hand, however, is repetitive and error-prone: dozens of <tr>, <th> and <td> tags that must line up perfectly. The HTML Table Generator creates the markup for you, either from data you paste or from an empty grid of placeholder cells, and styles it with a small stylesheet you can customise visually.

Two ways to create a table

  1. Paste data – copy cells from Excel, Google Sheets, Numbers or a CSV file into the data box. The separator is detected automatically and every row becomes a table row.
  2. Rows × columns – clear the data box and pick the number of rows and columns with the sliders to get a placeholder table you can fill in later.

Options

  • Header row in a semantic <thead> with scope="col", and optional row headers for the first column.
  • Caption – a visible title that also improves accessibility.
  • Borders, stripes, padding, alignment and full width toggles.
  • Header colors and border color pickers.
  • CSS class so the styles only apply to this table.

Clean output

The HTML is indented and contains only structure; all styling lives in the separate CSS tab, so you can drop the stylesheet if your site already styles tables. Need the same data as Markdown for a README? Use the Markdown Table Generator, or convert spreadsheets in bulk with CSV to HTML style converters.

Frequently Asked Questions

Yes. Copied spreadsheet cells are tab-separated, which the generator detects automatically. Comma, semicolon and pipe separated text works too.

th elements with scope="col" or scope="row" tell screen readers which header belongs to each cell, so users of assistive technology can understand the table. They also let you style headers separately.

Wrap the table in a div with overflow-x: auto so wide tables scroll horizontally on small screens instead of breaking the layout.

Yes. Characters such as <, > and & in your data are converted to HTML entities, so pasted text cannot break the markup.