Skip to main content

CSS/ARIA Data Tables: Advanced Table Design

Using native HTML table elements (<table>, <th>, <td>) is the most robust and recommended method for displaying tabular data.

However, for specific advanced responsive layouts, a table-like structure may be built with other elements like <div>s. Because these elements lack inherent table semantics, you must use ARIA to explicitly define the table's roles and properties to ensure it is accessible.

Table description
Header 1
Header 2
Header 3
Header 4
Header 5
Row 1 Header
Row 1 Data 1
Row 1 Data 2
Row 1 Data 3
Row 1 Data 4
Row 2 Header
Row 2 Data 1
Row 2 Data 2
Row 2 Data 3
Row 2 Data 4
Row 3 Header
Row 3 Data 1
Row 3 Data 2
Row 3 Data 3
Row 3 Data 4
Row 4 Header
Row 4 Data 1
Row 4 Data 2
Row 4 Data 3
Row 4 Data 4
Row 5 Header
Row 5 Data 1
Row 5 Data 2
Row 5 Data 3
Row 5 Data 4

Table Code

Since elements like <div> lack the inherent visual structure of a native <table>, their layout must be explicitly defined using CSS. The most effective method is to use attribute selectors that target the ARIA role assigned to each element.

This approach ensures that each part of the ARIA table is visually rendered correctly. Add the following rules to your stylesheet to apply the appropriate display properties.

<style>
  div[role="table"] { display: table; }
  div[role="table"] > div:first-of-type { display: table-caption; }
  div[role="rowgroup"] { display: table-row-group; }
  div[role="row"] { display: table-row; }
  div[role="cell"], div[role="columnheader"], div[role="rowheader"] { display: table-cell; }
</style>

Implement the ARIA data table using the code below. While the structure is scalable for additional rows and columns, ensure the following:

  1. The description element is maintained as the first child of the table container to work with the provided CSS. Otherwise, modify the CSS code to point to the correct location.
  2. The id values for the table and its description are unique on the page to prevent conflicts.
<div aria-describedby="table_caption" aria-label="Table Name" id="table" role="table">
  <div id="table_caption">Table description</div>
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Header 1</div>
      <div role="columnheader">Header 2</div>
      <div role="columnheader">Header 3</div>
      <div role="columnheader">Header 4</div>
      <div role="columnheader">Header 5</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="rowheader">Row 1 Header</div>
      <div role="cell">Row 1 Data 1</div>
      <div role="cell">Row 1 Data 2</div>
      <div role="cell">Row 1 Data 3</div>
      <div role="cell">Row 1 Data 4</div>
    </div>
  </div>
</div>
Last modified