Tables (Overview)

By the end of this lesson, you will be able to construct a semantic HTML table using all essential structural elements to display tabular data correctly.

What it is

An HTML table is a grid-based structure used exclusively for displaying tabular data, such as schedules, financial records, or statistical results. It is not intended for page layout (positioning headers, sidebars, etc.). The mental model is a spreadsheet: rows contain cells, and columns align vertically across those rows. Key terms include <table> (the container), <tr> (table row), <th> (table header cell), and <td> (table data cell).

Why it matters

• Semantic Meaning: Screen readers rely on table structures to announce which column a specific data point belongs to, making content accessible.
• Data Clarity: Tables provide a clear visual relationship between categories and values that lists or paragraphs cannot achieve efficiently.
• Styling Foundation: Properly structured tables allow CSS to target specific parts (like alternating row colors) without complex hacks.
• Standardization: Using standard tags ensures consistent rendering across different browsers and devices.

Syntax or steps

A minimal valid table requires three levels of nesting. First, wrap everything in <table>. Inside, define rows with <tr>. Within each row, use <th> for headers and <td> for data. While optional, grouping headers in <thead> and body content in <tbody> improves accessibility and styling control.

Example

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$25</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

Explanation: The <thead> section defines the column labels. The scope="col" attribute tells assistive technology that these headers apply to the entire column below them. The <tbody> contains the actual data rows. Each <tr> creates a horizontal line, and each <td> fills a specific cell within that line.

Common mistakes

• Using tables for layout: This breaks mobile responsiveness and confuses screen readers. Use CSS Grid or Flexbox for layout instead.
• Mismatched cell counts: If one row has 3 cells and another has 4, the table will look broken. Ensure every <tr> has the same number of <td> or <th> elements unless using colspan.
• Omitting headers: A table without <th> elements lacks context. Always label your columns or rows.
• Nested tables: Avoid putting a <table> inside a <td> unless absolutely necessary for complex data visualization, as it severely impacts performance and readability.

When to use it

Compare HTML tables with other data presentation methods to choose the right tool.

Practice

Guided Exercise: Create a table listing three friends with their favorite color and age. Include proper headers.

Challenge: Add a footer row that sums up the ages. Hint: Use <tfoot> and ensure the sum cell spans two columns using colspan="2".

Quick check

Question: What is the difference between <th> and <td>?
Answer: <th> defines a header cell (usually bold and centered by default) that describes the data, while <td> defines a standard data cell containing the actual information.

Summary

HTML tables are specialized tools for presenting relational data, not for arranging page elements. By strictly separating headers (<th>) from data (<td>) and using semantic groups like <thead> and <tbody>, you ensure your content is both visually organized and accessible to all users.