HTML Table Generator

Build HTML tables visually

Rows3

Columns3

Header rowStripedBordered

Preview

Header 1	Header 2	Header 3
Cell 1-1	Cell 1-2	Cell 1-3
Cell 2-1	Cell 2-2	Cell 2-3
Cell 3-1	Cell 3-2	Cell 3-3

HTML

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
    </tr>
    <tr>
      <td>Cell 3-1</td>
      <td>Cell 3-2</td>
      <td>Cell 3-3</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 12px;
  text-align: left;
}

th, td {
  border: 1px solid #2a4046;
}

tbody tr:nth-child(odd) {
  background: rgba(45, 212, 191, 0.06);
}

thead th {
  background: #101a1d;
}

Loading tool…

About the HTML Table Generator

Generate clean HTML table markup visually: set rows and columns, toggle header row, zebra striping, and borders, and preview the result live. Copy semantic HTML (thead/tbody) plus matching CSS — no more hand-typing td tags.

How to use

1Set row and column counts with sliders.
2Toggle header, stripes, and borders.
3Copy the HTML and CSS blocks.

Related Data & Formatting tools

SQL Formatter YAML ↔ JSON XML Formatter CSV Viewer / Editor Markdown Table Generator JSON → TypeScript

HTML Table Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.