HTML Table Structure: table, tr, td, and the Grid Model

An HTML table is built from three nested elements, table wraps the whole thing, tr is one row, and td is one data cell inside that row.

This builds on HTML table basics. If tags and nesting are new to you, start with the HTML guide.

Syntax

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

The table element contains rows, often grouped inside thead, tbody, and tfoot. Each tr contains data cells written as td or header cells written as th. A caption and column groups can also appear inside the table.

How Do HTML Table Columns Form?

HTML table columns form from the positions of cells in each row. Without spanning, the first cell goes in the first column, the second in the second, and so on. A col element can describe a column for styling but does not hold its data.

<table>
  <tr>
    <td>Ada Lovelace</td>
    <td>Analyst</td>
  </tr>
  <tr>
    <td>Alan Turing</td>
    <td>Cryptographer</td>
  </tr>
</table>

The names line up on the left and the roles on the right because every row uses the same cell order.

Why Do HTML Table Cells Misalign?

HTML table cells misalign when rows fill different column positions. Count normal cells and any slots occupied by colspan or rowspan before adding another cell.

Because columns come from position, a row with the wrong number of cells throws the whole grid off. If most rows have three cells and one row has two, that short row leaves a ragged gap where the missing cell would sit. The browser will not warn you, it just renders the hole.

<table>
  <tr>
    <td>Espresso</td>
    <td>Hot</td>
    <td>3.00</td>
  </tr>
  <tr>
    <td>Cold brew</td>
    <td>4.50</td>
  </tr>
</table>

That second row only has two cells, so the table renders unevenly and the prices no longer line up under one column. Count your cells per row, and when a cell needs to cover more than one slot, reach for the spanning attributes instead of leaving a row short.

When Should You Use an HTML Table?

Use a table when each row is one record and each column is one property of that record, the way a price list or a weekly schedule works. If you could drop the content into a spreadsheet without losing anything, it belongs in a table.

If the columns only exist to line up a few boxes, use CSS instead, usually flexbox or grid, which handles visual alignment without dragging tabular semantics into a layout problem.

Why Do HTML Tables Need Header Cells?

HTML table header cells identify what a row or column means. A table made only of td cells does not distinguish labels from values, leaving screen reader users without those header associations.

Use th for labels, scope for their direction, and caption for the table's name. The table headers guide adds those to the basic grid.

Example

<table>
  <tr>
    <td>Monday</td>
    <td>Closed</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9 to 5</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9 to 5</td>
  </tr>
</table>

This renders as three rows of two cells. The days form the left column and the hours form the right column, with each row contributing one cell to each. There is no header yet, so a screen reader reads it as a plain grid of data, which is the next thing you will want to fix.

Frequently Asked Questions

Do HTML table cells need a tr element?

HTML td and th cells belong inside a tr row. A cell placed outside a row is invalid markup, even if the browser repairs it and displays a table.

What do HTML colgroup and col elements do?

HTML colgroup and col describe columns for a limited set of CSS properties, including width and background. They do not contain cell data or replace th headers.

Can you nest one HTML table inside another?

An HTML table can be nested inside a td or th cell, but separate tables are usually easier to read and navigate. Do not put a table directly inside another table without a containing cell.

Why can an empty HTML table cell look wrong?

An empty HTML table cell may have little height or hidden borders, depending on its CSS and the other cells in its row. Use padding and border rules for appearance. Add a label such as "Not available" only when that describes the missing value.

Can an HTML table cell span rows or columns without spanning attributes?

An HTML table cell needs colspan or rowspan to occupy multiple grid slots. CSS width can change its appearance, but does not make it span additional cells in the table model.