SDC Pattern Library

Table: Basic table

Rationale

  • We use the table element to present tabular data in two dimensions.

  • Users may need to sort the rows of data based on values in a particular column.

Research

  • Any research undertaken related to this item - documented outcomes

Usage

  • Where and how to use the table element.

Example 1:

Screenshot of a data table
A table containing a list of secure messages

This is a work in progress. The subject as a link isn’t part of the pattern.

<table class="table">
    <thead class="table--head">
        <th scope="col" class="table--header--cell">Column A</th>
        <th scope="col" class="table--header--cell">Column B</th>
    </thead>
    <tbody>
        <tr class="table--row">
            <td class="table--cell">Cell A1</td>
            <td class="table--cell">Cell B1</td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Cell A2</td>
            <td class="table--cell">Cell B2</td>
        </tr>
    </tbody>
</table>
 
/* No context defined for this component. */