HTML Tables: table, tr, td, and th Explained

A table organizes content into rows and columns, the same way a spreadsheet does. HTML builds one from three tags nested inside each other: <table> for the whole thing, <tr> for each row, and <td> for each cell in that row.

This is the written version of my HTML tables video, part of my HTML beginners course. It's embedded near the top.

Key Takeaways

• <table> wraps the whole table. <tr> is a row. <td> is a cell inside a row.
• <th> is a header cell. Browsers bold and center it by default, and screen readers announce it differently than a regular <td>.
• colspan and rowspan merge a cell across multiple columns or rows.
• Old table attributes like border, cellpadding, cellspacing, align, and bgcolor still work, but CSS handles all of that today. Use them to understand old code, not to write new code.
• Tables are for tabular data. Don't reach for one to lay out a whole page; that's what CSS Grid and Flexbox are for.

The basic structure

A minimal table with two columns and one row looks like this:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Add more <tr> elements to add rows. Each <tr> needs its own set of <td> cells, one per column.

<table>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
  </tr>
</table>

With no styling at all, a browser renders this with no visible borders, just the text laid out in a grid. That's expected: structure and appearance are separate concerns, and right now you've only defined the structure.

Table headers

<th> works exactly like <td>, but it marks a cell as a header instead of a regular data cell:

<table>
  <tr>
    <th>Movie</th>
    <th>Rank</th>
  </tr>
  <tr>
    <td>Ghostbusters</td>
    <td>1</td>
  </tr>
  <tr>
    <td>The Goonies</td>
    <td>2</td>
  </tr>
</table>

Browsers bold and center <th> content by default. More importantly, a screen reader announces it as a header, which is what lets someone navigating by table structure understand which column they're in.

Merging cells

colspan merges a cell across multiple columns; rowspan merges it down multiple rows. Both take a number.

<table>
  <tr>
    <th colspan="2">Very Important Data</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

That header spans both columns instead of sitting in just one. rowspan works the same way, vertically: a cell with rowspan="3" takes the place of what would otherwise be three separate <td> cells stacked in that column, so you remove those cells from the rows below it.

Nested tables

A table can go inside a table cell, which is occasionally useful when a chunk of tabular data belongs inside a larger table:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <th>Movie</th>
          <th>Rank</th>
        </tr>
        <tr>
          <td>Jaws</td>
          <td>1</td>
        </tr>
      </table>
    </td>
    <td>Other content</td>
  </tr>
</table>

The inner table behaves independently: its own width, its own styling, its own row and column structure, just sitting inside a cell of the outer one.

Style it with CSS, not table attributes

Older HTML supported attributes like border, cellpadding, cellspacing, align, and bgcolor directly on table tags. They still work in every browser, but modern development handles all of it in CSS instead:

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

th, td {
  border: 1px solid #333;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #eee;
}

border-collapse: collapse merges adjacent cell borders into single lines instead of doubled ones, which is almost always what you want. padding replaces cellpadding, text-align replaces align, and background-color replaces bgcolor. If you're reading older code and see those attributes directly on <table> or <td>, this is the modern equivalent.

Tables aren't for page layout

Before CSS had reliable layout tools, tables were commonly used to lay out entire pages: navigation in one cell, content in another, footer in a third. Don't do this. A table communicates "this is tabular data" to screen readers and search engines, and using one purely for visual positioning breaks that meaning for anyone not looking at the page visually. For layout, use CSS Grid or Flexbox. Reserve <table> for content that's actually organized into rows and columns.

See MDN's table element reference for the full set of table-related tags, including <thead>, <tbody>, and <caption>.

Where to go next

HTML Forms covers the other major structural element for organizing input rather than data. From here, the course also covers anchor links and iframes.

FAQ

What's the difference between td and th?

Both are table cells. <td> is a regular data cell. <th> is a header cell: browsers bold and center it by default, and screen readers announce it differently, which is what makes a table's structure understandable to someone who can't see it.

How do I merge cells in an HTML table?

Use colspan="2" (or any number) to merge a cell across that many columns, or rowspan="2" to merge it down that many rows. Remove the cells that would otherwise have occupied that merged space.

Should I still use the border and cellpadding attributes?

You can, and they still work, but CSS is the modern way to style a table: border and padding properties in CSS instead of border and cellpadding attributes on the HTML. Use the attributes to read old code, not to write new code.

Can I put a table inside a table?

Yes. A <table> can go inside any <td>, and it behaves independently with its own rows, columns, and styling.

Is it okay to use a table to lay out my whole page?

No. Tables should hold tabular data, not page layout. Using one for layout misrepresents the content's structure to screen readers and search engines. Use CSS Grid or Flexbox for page layout instead.