Skip to main content
Rivet Design System Indiana University

Table

Present tabular data in rows and columns

Overview #

Use the table component to present tabular data in rows and columns.

Examples #


Open in new window
Copy link to example 
<table class="rvt-table">
  <caption class="rvt-sr-only">Default table</caption>
  <thead>
    <tr>
      <th scope="col">Services</th>
      <th scope="col">Description</th>
      <th scope="col">URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">One.IU</th>
      <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you search for what you want to do, and click to launch it.</td>
      <td><a href="#">one.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Zoom is a web collaboration tool available to all Indiana University students, faculty, and staff.</td>
      <td><a href="#">zoom.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Canvas</th>
      <td>Canvas is a learning management system developed by Instructure, Inc.</td>
      <td><a href="#">canvas.iu.edu</a></td>
    </tr>
  </tbody>
</table>
Open in new window
Copy link to example 
<div role="region" tabindex="0" class="rvt-table-responsive" aria-labelledby="responsive-table">
  <table class="rvt-table">
    <caption id="responsive-table" class="rvt-sr-only">Responsive table examples</caption>
    <thead>
      <tr>
        <th scope="col">Services</th>
        <th scope="col">Description</th>
        <th scope="col">URL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">One.IU</th>
        <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you
          search for what you want to do, and click to launch it.</td>
        <td><a href='#'>one.iu.edu</a></td>
      </tr>
        <th scope="row">Zoom</th>
        <td>Zoom is a web collaboration tool available to all Indiana University students, faculty, and staff.</td>
        <td><a href='#'>zoom.iu.edu</a></td>
      </tr>
      <tr>
        <th scope="row">Canvas</th>
        <td>Canvas is a learning management system developed by Instructure, Inc.</td>
        <td><a href='#'>canvas.iu.edu</a></td>
      </tr>
    </tbody>
  </table>
</div>
Open in new window
Copy link to example 
<table class="rvt-table-stripes">
  <caption class="rvt-sr-only">Striped table</caption>
  <thead>
    <tr>
      <th scope="col">Services</th>
      <th scope="col">Description</th>
      <th scope="col">URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">One.IU</th>
      <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you search for what you want to do, and click to launch it.</td>
      <td><a href="#">one.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Communicate with HD-quality video and audio for classes, web conferences, and collaboration.</td>
      <td><a href='#'>iu.zoom.us</a></td>
    </tr>
    <tr>
      <th scope="row">Canvas</th>
      <td>Canvas is a learning management system developed by Instructure, Inc.</td>
      <td><a href="#">canvas.iu.edu</a></td>
    </tr>
  </tbody>
</table>
Open in new window
Copy link to example 
<table class="rvt-table-plain">
  <caption class="rvt-sr-only">Plain table</caption>
  <thead>
    <tr>
      <th scope="col">Services</th>
      <th scope="col">Description</th>
      <th scope="col">URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">One.IU</th>
      <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you search for what you want to do, and click to launch it.</td>
      <td><a href="#">one.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Zoom is a web collaboration tool available to all Indiana University students, faculty, and staff.</td>
      <td><a href="#">zoom.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Canvas</th>
      <td>Canvas is a learning management system developed by Instructure, Inc.</td>
      <td><a href="#">canvas.iu.edu</a></td>
    </tr>
  </tbody>
</table>
Open in new window
Copy link to example 
<table class="rvt-table-cells">
  <caption class="rvt-sr-only">Table with cell borders</caption>
  <thead>
    <tr>
      <th scope="col">Services</th>
      <th scope="col">Description</th>
      <th scope="col">URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">One.IU</th>
      <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you search for what you want to do, and click to launch it.</td>
      <td><a href="#">one.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Communicate with HD-quality video and audio for classes, web conferences, and collaboration.</td>
      <td><a href='#'>iu.zoom.us</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Zoom is a web collaboration tool available to all Indiana University students, faculty, and staff.</td>
      <td><a href="#">zoom.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Canvas</th>
      <td>Canvas is a learning management system developed by Instructure, Inc.</td>
      <td><a href="#">canvas.iu.edu</a></td>
    </tr>
  </tbody>
</table>
Open in new window
Copy link to example 
<table class="rvt-table-compact">
  <caption class="rvt-sr-only">Compact table</caption>
  <thead>
    <tr>
      <th scope="col">Services</th>
      <th scope="col">Description</th>
      <th scope="col">URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">One.IU</th>
      <td>One.IU was created to bring a modern app store experience to finding what you need at IU. With One.IU, you search for what you want to do, and click to launch it.</td>
      <td><a href="#">one.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Zoom</th>
      <td>Zoom is a web collaboration tool available to all Indiana University students, faculty, and staff.</td>
      <td><a href="#">zoom.iu.edu</a></td>
    </tr>
    <tr>
      <th scope="row">Canvas</th>
      <td>Canvas is a learning management system developed by Instructure, Inc.</td>
      <td><a href="#">canvas.iu.edu</a></td>
    </tr>
  </tbody>
</table>

Elements #

Element Description Usage Required Multiple
Caption Screen reader-only summary of the table's content Limit to a short phrase

Caption is required

Component may contain only one Caption
Column headers Header text describing each column Limit to 2-3 words

Column headers is required

Component may contain multiple Column headers
Rows Rows of table cells Avoid long or complex content in a table cell

Rows is required

Component may contain multiple Rows

Usage #

Do

  • Use to present complex tabular data in a layout that's easier to understand
  • Sort rows in an order that makes sense for the data, such as alphabetical or numeric
  • Limit the information in each cell. Make repetitive information, like units of measurement, part of the column header.

Don't

  • Use to structure your web page—use the grid instead
  • Use for normal lists—use the list component instead
  • Use when your data set is small and only has a label and a value—use a description list instead
  • Put anything other than text, numbers, or symbols in a table cell

Accessibility #

  • Give your table a meaningful caption. Change the default value of the caption element to text that clearly describes the type of data being presented by the table.
  • When using the responsive table wrapper be sure to include the appropriate role, tabindex, and aria-labelledby attributes as show in the example. If using more than one responsive table on a page, make sure that each table’s aria-labelledby and id attribute values are unique. See Under-engineered Responsive Tables by Adrian Roselli for more detail.