HTML tables playground

Build tabular data with table, caption, th, scope, thead, tbody, tfoot, colgroup, colspan, and rowspan while previewing and copying the result.

Presets

Choose a configuration as a starting point, then adjust any control.

Table data

caption

caption gives the table a programmatic title and helps explain what its data represents.

Column headers

Separate 2 to 6 headers with |. They are generated as th elements with scope="col".

Data rows

Write one row per line and separate its cells with |. Up to 10 rows are supported.

Semantic structure

Use the first cell as a row header

The first cell in each row is generated as th with scope="row" to associate it with that row’s data.

Group with thead, tbody, and tfoot

Sections make the table’s header, body, and summary structure explicit.

Optional grouped heading

When text is provided, a header row spanning every column is generated with colspan.

Merge repeated row headers

Consecutive matching values in the first column are automatically combined with rowspan.

Presentation and summary

Column for colgroup

colgroup and col can style an entire column without selecting every cell individually.

Alternate row backgrounds

Add a summary row

The summary is placed in tfoot when table sections are enabled.

Summary label

Summary value

Web project status
Phase	Task	Owner	Status
Planning	Scope	Ana	Complete
Planning	Research	Luis	Complete
Development	Semantic HTML	Mei	In progress
Development	Accessibility	Sam	Pending
Completed tasks			2 of 4

HTML

<div class="table-wrapper">
  <table class="data-table">
    <caption>Web project status</caption>

    <colgroup>
      <col>
      <col>
      <col>
      <col class="highlighted-column">
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Phase</th>
        <th scope="col">Task</th>
        <th scope="col">Owner</th>
        <th scope="col">Status</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row" rowspan="2">Planning</th>
        <td>Scope</td>
        <td>Ana</td>
        <td>Complete</td>
      </tr>
      <tr>
        <td>Research</td>
        <td>Luis</td>
        <td>Complete</td>
      </tr>
      <tr>
        <th scope="row" rowspan="2">Development</th>
        <td>Semantic HTML</td>
        <td>Mei</td>
        <td>In progress</td>
      </tr>
      <tr>
        <td>Accessibility</td>
        <td>Sam</td>
        <td>Pending</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th colspan="3" scope="row">Completed tasks</th>
        <td>2 of 4</td>
      </tr>
    </tfoot>
  </table>
</div>

CSS

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: CanvasText;
}

.data-table caption {
  margin-block-end: 0.75rem;
  font-weight: 700;
  text-align: start;
}

.data-table :is(th, td) {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in oklch, CanvasText 24%, transparent);
  text-align: start;
}

.data-table thead,
.data-table tfoot {
  background: color-mix(in oklch, Highlight 16%, Canvas);
}

.data-table .highlighted-column {
  background: color-mix(in oklch, Highlight 10%, transparent);
}

.data-table tbody tr:nth-child(even) {
  background: color-mix(in oklch, CanvasText 6%, transparent);
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: CanvasText;

  caption {
    margin-block-end: 0.75rem;
    font-weight: 700;
    text-align: start;
  }

  :is(th, td) {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklch, CanvasText 24%, transparent);
    text-align: start;
  }

  :is(thead, tfoot) {
    background: color-mix(in oklch, Highlight 16%, Canvas);
  }

  .highlighted-column {
    background: color-mix(in oklch, Highlight 10%, transparent);
  }

  tbody tr:nth-child(even) {
    background: color-mix(in oklch, CanvasText 6%, transparent);
  }
}