CodesBeautify

HTML Table Generator

Pick rows and columns and get a semantic table with caption, header cells and optional CSS.

Table HTML3 rows x 3 columns
<table class="data-table">
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Col 1</td>
      <td>Row 1 Col 2</td>
      <td>Row 1 Col 3</td>
    </tr>
    <tr>
      <td>Row 2 Col 1</td>
      <td>Row 2 Col 2</td>
      <td>Row 2 Col 3</td>
    </tr>
    <tr>
      <td>Row 3 Col 1</td>
      <td>Row 3 Col 2</td>
      <td>Row 3 Col 3</td>
    </tr>
  </tbody>
</table>

<style>
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border: 1px solid #cbd5e1; padding: 0.5rem 0.75rem; text-align: left; }
.data-table thead th { background: #f1f5f9; }
</style>
Runs locally in your browser

About the HTML Table Generator

Choose how many rows and columns you need and this builder writes a complete table: a caption describing what the data shows, a thead whose cells use th with scope="col", a body of placeholder cells you can overwrite, and an optional tfoot for totals. The scope attribute is the part people leave out, and it is what lets a screen reader announce the column heading before reading each cell in that column.

The styling options cover what actually makes a table readable: collapsed borders so grid lines do not double up between neighbouring cells, a tinted header row, zebra striping on alternate rows, and a wrapper with overflow-x: auto so a wide table scrolls inside itself instead of stretching the whole page sideways on a phone. Everything comes out as a small stylesheet you can paste into your own file rather than as inline attributes.

Use tables for data only, never for page layout, which is what the old width and cellpadding attributes were abused for. If you already hold the content somewhere, converting beats retyping: try CSV to HTML or JSON to HTML Table. Going the other way, HTML Table to CSV pulls the rows back out of existing markup, and LaTeX Table Generator covers typeset documents.

How to use

  1. Set the number of body rows and columns you need.
  2. Write a caption that says what the table shows.
  3. Turn on the header row, and add a footer if you need a totals line.
  4. Copy the table and replace the placeholder cells with your data.

Common questions

What does scope col do?
It ties a header cell to the column below it, so assistive technology can announce the heading before each cell value.
Where should the caption go?
Directly after the opening table tag. It is the accessible name of the table and stays with it however the page is styled.
How do I stop a wide table breaking the layout?
Wrap it in a container with overflow-x auto, which is what the scroll wrapper option adds.
Is tfoot required for totals?
No, but it marks the summary row as separate from the data, and some browsers keep it visible when the body scrolls.