HTML axis Attribute

Introduction

The axis attribute is an HTML feature primarily used with the <td> (table data) and <th> (table header) elements to define conceptual categories for cells in a table. This attribute enhances the accessibility and structure of tables, providing valuable information to assistive technologies and users.

What You’ll Learn

Purpose of axis Attribute

The axis attribute is used to indicate the category of data represented by a cell in a table. It helps in associating table cells with specific conceptual groups, making it easier for screen readers and other assistive technologies to navigate and interpret tabular data in complex, multi-dimensional layouts.

📝 Syntax

Add axis to a <td> or <th> cell with one or more category names:

<th id="category" axis="category">Category</th>
<td headers="category" axis="category">Product 1</td>

Syntax Rules

• Valid only on <td> and <th> elements.
• Value is a comma-separated list of category name tokens.
• Names describe conceptual axes, not numeric row or column positions.
• Pair with headers and id on header cells for clearer relationships.

💎 Values

The axis attribute accepts a comma-separated list of category names that describe the conceptual group a cell belongs to. For example:

• Single category — axis="category" or axis="value" labels the type of data in that cell.
• Multiple categories — axis="product, item" assigns the cell to more than one conceptual axis.
• Custom names — Use meaningful tokens such as student_info, region, or quarter that describe your data model.

<th axis="category">Product</th>
<th axis="value">Price</th>
<td axis="product, item">Widget</td>

Applicable Elements

Examples Gallery

Implementation example with category names and dynamic JavaScript axis.

<table>
  <tr>
    <th id="category" axis="category">Category</th>
    <th id="value" axis="value">Value</th>
  </tr>
  <tr>
    <td headers="category" axis="category">Product 1</td>
    <td headers="value" axis="value">$10</td>
  </tr>
  <tr>
    <td headers="category" axis="category">Product 2</td>
    <td headers="value" axis="value">$20</td>
  </tr>
</table>

<td id="dynamicCell">Apple</td>

<script>
  // Dynamically set the axis attribute for a table cell
  document.getElementById("dynamicCell").axis = "product, item";
</script>

♿ Accessibility

• Prefer scope and headers — Modern accessible tables use scope on <th> and headers on complex cells.
• Use semantic structure — Wrap headers in <thead>, body rows in <tbody>, and add a <caption>.
• axis is legacy — Few browsers ever surfaced axis categories to assistive tech; do not rely on it alone.
• Meaningful header text — Clear column and row labels matter more than axis tokens.
• Test with screen readers — Verify tables with NVDA, VoiceOver, or JAWS using current HTML5 patterns.

💡 Best Practices

• Use the axis attribute to provide additional semantic information to tables, especially when dealing with complex data relationships in legacy documents.
• Ensure consistency and accuracy when assigning category names to the axis attribute to maintain table structure integrity.
• Test your tables with assistive technologies to verify that modern attributes like scope and headers enhance accessibility and usability.