Tables

CSS file

Tables show tabular data in columns and rows.

<table class="sba-c-table">
  <caption>Bordered table</caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-table-header="Document title">Declaration of Independence</th>
      <td data-table-header="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
      <td data-table-header="Year">1776</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Bill of Rights</th>
      <td data-table-header="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
      <td data-table-header="Year">1791</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Declaration of Sentiments</th>
      <td data-table-header="Description">A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
      <td data-table-header="Year">1848</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Emancipation Proclamation</th>
      <td data-table-header="Description">An executive order granting freedom to slaves in designated southern states.</td>
      <td data-table-header="Year">1863</td>
    </tr>
  </tbody>
</table>

<table class="sba-c-table sba-c-table--borderless">
  <caption>Borderless table: A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.</caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-table-header="Document title">Declaration of Independence</th>
      <td data-table-header="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
      <td data-table-header="Year">1776</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Bill of Rights</th>
      <td data-table-header="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
      <td data-table-header="Year">1791</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Declaration of Sentiments</th>
      <td data-table-header="Description">A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
      <td data-table-header="Year">1848</td>
    </tr>
    <tr>
      <th scope="row" data-table-header="Document title">Emancipation Proclamation</th>
      <td data-table-header="Description">An executive order granting freedom to slaves in designated southern states.</td>
      <td data-table-header="Year">1863</td>
    </tr>
  </tbody>
</table>

Note about mobile web

All table styles collapse into a single column for mobile devices. This requires adding a data-table-header attribute with a value that matches its corresponding column header in the thead. If you wish avoid this behavior on mobile web, do not apply the sba-c-table class name or the data-table-header attributes.

Accessibility

• Simple tables can have two levels of headers. Each header cell should have scope="col" or scope="row".
• Complex tables are tables with more than two levels of headers. Each header should be given a unique id and each data cell should have a headers attribute with each related header cell’s id listed.
• When adding a title to a table, include it in a <caption> tag inside of the <table> element.

Usability

When to use

• When you need tabular information, such as statistical data.

When to consider something else

• Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.

Guidance

• Tables are great at displaying tabular data. Minimal visual styling helps surface this information more easily.