HTML Table Generator — Create Tables in HTML & Markdown

HTML Table Structure

An HTML table is made up of a handful of elements that work together to provide semantic meaning and accessibility:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Engineer</td>
      <td>Platform</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Designer</td>
      <td>Product</td>
    </tr>
  </tbody>
</table>

<table> wraps everything. <thead> contains the header row. <tbody> contains the data rows. Each row is a <tr>. Header cells use <th>; data cells use <td>. Screen readers use the semantic distinction between <th> and <td> to associate column headers with their data cells — always use <th> for header cells.

How to Use the HTML Table Generator

1. Open the HTML Table Generator.
2. Set the number of rows and columns using the number inputs.
3. Click each cell in the editor grid and type your content. The first row can be styled as a header row.
4. Choose HTML or Markdown output using the toggle. Toggle bordered and striped options for HTML.
5. Click Copy and paste the code into your project.

HTML vs Markdown Tables

Bootstrap Table Classes

If your project uses Bootstrap, the generator's bordered and striped checkboxes add the standard Bootstrap table modifier class names:

<table class="table-bordered table-striped">
  ...
</table>

Bootstrap also provides table-hover (highlight row on hover), table-dark (dark background), and table-sm (compact spacing). Add these manually to the class attribute after copying the output.

Markdown Table Syntax

GitHub-Flavored Markdown (GFM) tables use a pipe-delimited format with a separator row after the header:

| Name  | Role     | Department |
|-------|----------|------------|
| Alice | Engineer | Platform   |
| Bob   | Designer | Product    |

The separator row (dashes) is required. GitHub, GitLab, VS Code, Notion, and most Markdown renderers support GFM tables. Standard Markdown (CommonMark) does not include table syntax — only the GFM extension does.

Column alignment in Markdown

Add colons to the separator row to control alignment:

| Left     | Center   | Right     |
|:---------|:--------:|----------:|
| text     | text     | text      |

Advanced HTML Table Techniques

Responsive tables

Wide tables overflow on small screens. Wrap the table in a scrollable container:

<div style="overflow-x: auto;">
  <table>...</table>
</div>

This preserves the table layout while allowing horizontal scroll on mobile. An alternative is to use CSS to stack cells vertically on small screens usingdisplay: block on td elements with a data-label attribute for labelling.

Sortable tables

Add click handlers to <th> elements to sort rows by that column. A simple approach in plain JavaScript:

const table = document.querySelector('table');
table.querySelectorAll('th').forEach((th, i) => {
  th.addEventListener('click', () => {
    const tbody = table.querySelector('tbody');
    const rows = [...tbody.querySelectorAll('tr')];
    rows.sort((a, b) => {
      const aText = a.cells[i].textContent;
      const bText = b.cells[i].textContent;
      return aText.localeCompare(bText, undefined, { numeric: true });
    });
    tbody.append(...rows);
  });
});

Using scope attributes for accessibility

For complex tables with both row and column headers, add the scope attribute to <th> elements:

<th scope="col">Column Header</th>
<th scope="row">Row Header</th>

This gives screen readers explicit instructions on which cells each header describes, improving accessibility for users navigating with assistive technology.

Common Table Design Mistakes

Using tables for layout

HTML tables should only contain tabular data — information that naturally belongs in rows and columns. Using tables for page layout (as was common in the 1990s) causes accessibility failures, poor screen reader behavior, and maintenance problems. Use CSS Grid or Flexbox for layout.

Missing header elements

Using <td> for header cells instead of <th> is a common mistake. The generator's "First row is header" option correctly wraps header cells in <th> elements inside a <thead> block, which is the correct semantic markup.

No overflow handling

Tables with many columns will overflow their container on mobile without a scroll wrapper. Always test wide tables at 320px–375px viewport width and add overflow-x: auto to the container if needed.

Common Questions

Can I add colspan or rowspan?

The generator produces a standard grid without merged cells. To add colspan or rowspan, manually edit the generated HTML — add the colspan="2" or rowspan="3" attribute to the relevant <td> or <th> element and remove the excess cells that the merged cell covers.

How do I style the table without a framework?

Target the table, th, and td selectors in your CSS. A minimal style that adds borders and padding:

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; }
th { background: #f9fafb; font-weight: 600; }