The table Tag

By the end of this lesson, you will be able to create accessible HTML tables using semantic structure and CSS, while understanding why legacy presentational attributes are obsolete.

What it is

The <table> element defines a tabular data structure in HTML. It consists of rows (<tr>), header cells (<th>), and standard data cells (<td>). The mental model is that a table represents relationships between data points, not visual layout. Related terms include "semantic markup," which means using tags for their meaning rather than appearance, and "accessibility," ensuring screen readers can interpret the data correctly.

Why it matters

• Accessibility: Screen readers rely on proper table structure to announce row and column headers, helping users with visual impairments understand complex data.
• Maintainability: Separating content (HTML) from presentation (CSS) makes code easier to update and debug.
• Responsiveness: Modern CSS allows tables to adapt to different screen sizes, whereas fixed-width presentational attributes do not.
• Standards Compliance: Using deprecated attributes causes validation errors and may break rendering in future browser versions.

Syntax or steps

A minimal valid table requires the <table> wrapper, at least one <tr>, and cells within those rows. Use <thead> for header rows and <tbody> for data rows to enhance semantics. Never use attributes like border, cellpadding, or bgcolor; replace them with CSS properties such as border-collapse, padding, and background-color.

Example

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<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>

This example uses CSS for styling instead of HTML attributes. The scope="col" attribute on <th> elements explicitly links headers to columns, improving accessibility. The border-collapse: collapse property ensures borders merge into single lines, replacing the old border attribute behavior.

Common mistakes

• Using tables for layout: Do not use <table> to position page elements like sidebars or footers. Use Flexbox or Grid instead.
• Omitting headers: Every table should have <th> elements. If a table has no logical headers, consider if it truly needs to be a table.
• Missing scope attributes: Without scope="col" or scope="row", assistive technologies may struggle to associate data with headers.
• Hardcoding styles: Avoid inline styles or deprecated attributes like align. Always use external or internal CSS classes.

When to use it

Use <table> only for displaying tabular data where rows and columns represent meaningful relationships. For general page layout, use CSS Grid or Flexbox.

Practice

Guided Exercise: Create a table listing three books with columns for Title, Author, and Year. Style it so alternating rows have a light gray background using CSS :nth-child(even).

Challenge: Add a caption to your table using <caption> and ensure all header cells have appropriate scope attributes. Verify accessibility by checking if the caption appears before the table in the DOM.

Quick check

Question: Why is the border attribute on <table> considered obsolete?

Answer: It mixes presentation with content. CSS provides more flexible, responsive, and maintainable ways to style borders, such as border-collapse and border properties.

Summary

HTML tables are strictly for tabular data, relying on semantic structure like <thead> and <th> for accessibility. Always separate styling from markup by using CSS, avoiding deprecated presentational attributes entirely.