Skip to content

HTML Table Generator

Layout Tools

Build beautiful, responsive HTML tables with ease. Customize rows, columns, headers, and styling options with live preview and ready-to-use code.

Table Size

Rows:4
Columns:4

Structure

Styling

Content

Preview

Header 1Header 2Header 3Header 4
Cell 1-1Cell 1-2Cell 1-3Cell 1-4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
HTMLhtml
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
      <td>Cell 1-4</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
      <td>Cell 2-4</td>
    </tr>
    <tr>
      <td>Cell 3-1</td>
      <td>Cell 3-2</td>
      <td>Cell 3-3</td>
      <td>Cell 3-4</td>
    </tr>
  </tbody>
</table>
CSScss
table {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, -apple-system, sans-serif;
}

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

thead th {
  background-color: #f3f4f6;
  font-weight: 600;
}

Flexible Structure

Easily add or remove rows and columns. Include optional header and footer sections for complete table structure.

Custom Styling

Apply borders, striped rows, and hover effects. Customize header background and border colors.

Semantic HTML

Generates proper semantic HTML with thead, tbody, and tfoot. Accessible and SEO-friendly markup.

How to Use

  1. 1

    Set Table Size

    Use the plus/minus buttons to adjust the number of rows and columns (up to 20x12).

  2. 2

    Configure Structure

    Toggle header row, footer row, borders, striped rows, and hover effects.

  3. 3

    Customize Content

    Set placeholder text for headers and cells. Add a custom CSS class if needed.

  4. 4

    Copy Your Code

    Preview your table and copy both HTML and CSS code to use in your project.

Table Best Practices

Accessibility

  • • Always use <th> for header cells
  • • Include <thead> and <tbody>
  • • Add scope attributes for complex tables
  • • Consider adding a <caption> element

Responsive Design

  • • Wrap tables in a scrollable container
  • • Use overflow-x: auto on mobile
  • • Consider card layouts for small screens
  • • Test on various device sizes

Related Tools

HTML Layout Generator

Visual drag & drop HTML layout builder. Create semantic page structures with header, nav, main, sidebar, and footer.

Div Generator

Create nested div structures with classes and IDs. Perfect for component scaffolding.

CSS Grid Generator

Visual CSS Grid layout builder. Define columns, rows, gaps, and areas with live preview.