UI components

Tables

Tables show tabular data in columns and rows.

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

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

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.