Table Cell (td)

By the end of this lesson, you will be able to construct accessible HTML tables using <td> for data and <th> for headers, ensuring correct semantic structure.

What it is

The <td> element defines a standard cell in an HTML table. It stands for "table data" and contains the actual information or values within the grid. In contrast, the <th> element defines a header cell, which labels the row or column. Using the correct element is crucial for accessibility, as screen readers rely on these tags to understand the relationship between data and its context.

Why it matters

• Accessibility: Screen readers announce <th> cells differently than <td>, helping users with visual impairments navigate complex data.
• Semantic Correctness: Proper tagging ensures search engines and other tools interpret your content accurately.
• Styling Consistency: Browsers apply default bold styling to <th>, reducing the need for extra CSS to distinguish headers from data.
• Maintainability: Clear separation of headers and data makes code easier to read and update for developers.

Syntax or steps

A basic table structure requires a <table> wrapper, rows defined by <tr>, and cells defined by either <th> or <td>. Header cells (<th>) typically appear in the first row or column, while data cells (<td>) fill the remaining space.

Example

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

In this example, <th> elements define the column titles "Name" and "Role". The scope="col" attribute explicitly tells assistive technology that these headers apply to the columns below them. The <td> elements contain the specific data for Alice and Bob. Wrapping headers in <thead> and data in <tbody> further improves semantic clarity.

Common mistakes

• Using <td> for headers: This breaks accessibility. Always use <th> for labels.
• Missing scope attributes: Without scope, screen readers may guess incorrectly about which headers apply to which cells, especially in complex tables.
• Nesting tables improperly: Avoid placing block-level elements like <div> directly inside <td> without proper structure, though modern browsers are forgiving, it can cause layout issues.
• Ignoring empty cells: If a cell has no data, still include an empty <td></td> to maintain the grid structure.

When to use it

Use <td> for all non-header data points. Use <th> whenever a cell serves as a label for a row or column.

Practice

Guided Exercise: Create a simple table listing three fruits and their colors. Use <th> for "Fruit" and "Color", and <td> for the data.

Challenge: Add a third column for "Price". Ensure each <th> has the correct scope attribute.

Hint: Remember that scope="row" is used if the header is in the first column of a row, while scope="col" is for the first row.

Quick check

Question: Which element should you use for a cell containing the value "42" in a data table?

Answer: You should use <td> because "42" is data, not a header label.

Summary

The <td> element is essential for displaying data in HTML tables, while <th> provides necessary context through headers. Correct usage of these elements, along with scope attributes, ensures your tables are both visually clear and accessible to all users.