A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.

Image of table with four columns and three rows

Sample element

Column 1 Column 2 Column 3 Column 4
One Two Three Four
Five Six Seven Eight
Nine Ten Eleven Twelve


View a live version of this element and see how it can be customized.

<th scope="col" data-label="Date">Date</th>
<th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button>
<th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button>
<td data-label="Date">12 February</td>
<td data-label="Event">Waltz with Strauss</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
<small slot="summary">Dates and venues subject to change.</small>

<link rel="stylesheet" href="../rh-table-lightdom.css">

<script type="module">
import '@rhds/elements/rh-table/rh-table.js';
View the <rh-table> demo in a new tab

When to use

  • To organize and display structured data
  • If a user needs to scan, examine, and compare data
  • If a user must navigate to a specific piece of data to complete a task
© 2021-2024 Red Hat, Inc. Deploys by Netlify