Table Attributes (Focus on Accessibility)

When HTML was first developed, most table styling (like colors, borders, and alignment) was controlled directly by attributes on the <table>, <tr>, <th>, and <td> tags.

Today, due to the principle of separating structure (HTML) from presentation (CSS), nearly all styling attributes are deprecated. Modern HTML table attributes primarily focus on accessibility and providing hooks for CSS or JavaScript.

1. Essential Accessibility Attributes

These attributes are vital for non-visual users (screen readers) and for organizing complex data.

A. The scope Attribute (On <th>)

As briefly covered in the cell spanning tutorial, the scope attribute is used on the header cell (<th>) to clarify whether the header applies to the data in the row or the data in the column.

scope Value	Relationship	Purpose
col	Column Header	The header applies to all data cells below it in the column. (Most common)
row	Row Header	The header applies to all data cells to its right in the row. (Used for the first cell in a data row)

Using scope on Headers

<thead>
  <tr>
    <th scope="col">Product ID</th>
    <th scope="col">Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">P-452A</th>
    <td>$19.99</td>
  </tr>
</tbody>

B. The id and headers Attributes (For Complex Tables)

For very complex tables where simple scope="col" or scope="row" is insufficient (e.g., tables with multiple header levels), you must explicitly link data cells to their respective header cells using the id and headers attributes.

1. id (on <th>): Assigns a unique ID to a header cell.
2. headers (on <td>): Contains a space-separated list of the IDs of all headers that apply to that specific data cell.

This creates a robust map for screen readers, allowing them to announce the correct headers for any cell.

Linking Headers to Data Cells

<table>
  <thead>
    <tr>
      <th id="prod">Product</th>
      <th id="q1">Q1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="nameA" headers="prod">Widget Alpha</th>
      <td headers="prod q1">$100</td> 
    </tr>
  </tbody>
</table>

---

2. General Purpose and Styling Attributes

These attributes are supported across all HTML elements, but are particularly important for table styling and functionality.

Attribute	Applies To	Purpose	Example
class	All Table Elements	Applies one or more CSS classes for external styling. Highly Recommended	<table class="striped-rows">
id	All Table Elements	Provides a unique hook for styling specific tables or rows, or for JavaScript access.	<tbody id="current-data">
style	All Table Elements	Applies inline CSS directly to the element. Use sparingly.	<td style="color: red;">
title	All Table Elements	Provides advisory information about the element (often displayed as a tooltip on hover).	<table title="2024 Sales Performance">

3. Deprecated Styling Attributes (Avoid!)

The following attributes still work in most modern browsers for backward compatibility, but they are obsolete and should be controlled using CSS instead. Using them violates the core separation of concerns principle.

Deprecated Attributes

DO NOT USE these attributes for new web development. Use CSS properties like border-collapse, width, text-align, and padding instead.

Deprecated Attribute	Replacement CSS Property	Element Used On
border	border: 1px solid black;	<table>
width, height	width: 100%; height: auto;	<table>, <th>, <td>
align	text-align: center;	<table>, <tr>, <th>, <td>
bgcolor	background-color: #eee;	<table>, <tr>, <th>, <td>
cellpadding	padding on <th> and <td>	<table>
cellspacing	border-spacing or border-collapse	<table>

---

Conclusion

Modern HTML table attributes prioritize semantic meaning and accessibility. By avoiding deprecated styling attributes and focusing on tools like scope, id, and headers, you ensure your tables are robust, well-structured, and usable by all audiences.