HTML Tables

Imagine sorting out a spreadsheet containing twenty different server files, their storage sizes, and compression times. If you paste that data as a raw block of text, it becomes unreadable. HTML tables let you organize data into neat, grid-aligned structures of rows and columns, just like a sheet in Excel. You can map out complex schedules, compare tools, or display log metrics in clean, professional layouts that are easy to scan.

In this page:

Basic Table Elements (table, tr, td)
Declaring Table Headings (th)
Merging Cells (colspan and rowspan)
Semantic Table Structure (thead, tbody, tfoot)
Accessible Tables with captions and scopes
Column and Row Spanning
Table Structure Elements
Colgroup and Col Elements

Basic Table Elements (table, tr, td)

To build an HTML table, you define the grid system using three nested elements: the table container, tr for table rows, and td for table data cells.

Note: Think of tr as a horizontal row container, and td as individual cells side-by-side within that row.

Warning: Never place text directly inside a tr tag; all content must sit securely inside td or th data cell containers.

Example: Basic Table Elements (table, tr, td)

markup

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

Declaring Table Headings (th)

Table headings should stand out from regular data. By using the th tag instead of td for your header row, browsers will automatically render the text in bold and center-aligned format.

Note: Use the th tag on your first row to make reading table columns much easier.

Warning: Do not style normal data cells manually to look like headers; use semantic th tags for better code design.

Example: Declaring Table Headings (th)

markup

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

Merging Cells (colspan and rowspan)

Sometimes you need a header or summary row to span across multiple columns or merge cells vertically. The colspan attribute merges cells horizontally across columns, and the rowspan attribute merges them vertically down rows.

Note: Double-check your cell counts when using span attributes to prevent table alignment issues.

Warning: Incorrect span values can distort your table borders and push data cells completely out of alignment.

Example: Merging Cells (colspan and rowspan)

markup

<table>
  <tr>
    <td colspan="2">Merged across columns</td>
  </tr>
  <tr>
    <td rowspan="2">Merged down rows</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

Semantic Table Structure (thead, tbody, tfoot)

For complex tables, you can group rows into semantic containers: thead (table header), tbody (table body), and tfoot (table footer). This makes it easier to apply specific visual styles and print long tables across multiple pages.

Note: Modern development standards recommend grouping your rows inside semantic containers for clean code organization.

Warning: Ensure you place your tr row tags securely inside these larger structural blocks.

Example: Semantic Table Structure (thead, tbody, tfoot)

markup

<table>
  <thead>
    <tr><th>Item</th></tr>
  </thead>
  <tbody>
    <tr><td>Apple</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td></tr>
  </tfoot>
</table>

Accessible Tables with captions and scopes

Screen readers can find tables difficult to interpret unless you add accessibility helpers. The caption tag defines a visible title description for the table, and the scope attribute tells assistive devices if a th is a header for a column or row.

Note: Always specify scope="col" or scope="row" inside your th tags for maximum accessibility.

Warning: Failing to declare captions and scopes can make complex data grids unusable for visually impaired visitors.

Example: Accessible Tables with captions and scopes

markup

<table>
  <caption>Monthly Sales</caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Sales</th>
  </tr>
</table>

Column and Row Spanning

The colspan attribute makes a cell stretch across multiple columns. The rowspan attribute makes a cell stretch across multiple rows. Both are numbers representing how many cells to span.

Note: Always count your columns carefully when using colspan to avoid layout breaking.

Warning: Overusing spanning makes tables hard to read and maintain.

Example: Column and Row Spanning

markup

<table>
  <tr>
    <td colspan="3">Spans 3 columns</td>
  </tr>
  <tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Table Structure Elements

Use thead for header rows, tbody for main data rows, and tfoot for summary rows. This gives your table semantic meaning and helps screen readers navigate it correctly.

Note: Browsers render tbody even if you omit it, but writing it explicitly keeps your code clean.

Warning: Skipping table structure elements makes large tables inaccessible to screen reader users.

Example: Table Structure Elements

markup

<table>
  <thead>
    <tr><th>Product</th></tr>
  </thead>
  <tbody>
    <tr><td>Book</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Summary</td></tr>
  </tfoot>
</table>

Colgroup and Col Elements

The colgroup and col elements let you apply styling to an entire column of a table without touching every single cell. Instead of adding a class to every td in a column, you describe the column once at the top of the table.

Note: Use colgroup when you want a whole column highlighted, like a totals column, without repeating CSS classes on every row.

Warning: colgroup must appear right after the opening table tag, before thead or any rows, or browsers will ignore it.

Example: Colgroup and Col Elements

markup

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col>
  </colgroup>
  <tr>
    <td>Total</td>
    <td>100</td>
  </tr>
</table>

Common Mistakes

Placing plain text or non-row elements directly inside the table tag.
Miscounting columns when coding colspan and rowspan attributes, leading to distorted table layouts.
Using empty layout table structures for visual page design rather than for structuring actual tabular data.

Chapter Summary

Tables are constructed using rows (tr), which contain header cells (th) or standard data cells (td).
Merge multiple cells horizontally using the colspan attribute, and vertically with the rowspan attribute.
Organize complex data semantically using the thead, tbody, and tfoot containers for maximum accessibility.

Browser Support

HTML tables and standard structure tags are universally supported across all browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Page Title Next Lesson → HTML Table Borders

HTML Tables

Basic Table Elements (table, tr, td)

Declaring Table Headings (th)

Merging Cells (colspan and rowspan)

Semantic Table Structure (thead, tbody, tfoot)

Accessible Tables with captions and scopes

Column and Row Spanning

Table Structure Elements

Colgroup and Col Elements

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code