information
COVID-19 Recovery and Resilience

Access City programs, people and projects designed to help Portland recover. Portland United
Volunteer. Play. Stay. Shop. Show the Rose City a little love. Be Here for Portland.

Accessible and Usable Tables on Portland.gov

Information
Tables can be difficult to make accessible and need extra consideration when being used to display data on a webpage.
On this page

Portland.gov is committed to creating information and is easy to access and easy to understand. 

  • Use tables to display data, never as a means of page layout.
  • Use Base table template by default.
  • Use Small table template for large amounts of data.
  • Column and row table headers are required for accessibility.
  • The table header tag th identifies cells that are either row or column headers. Include scope="col" for column table headers and scope="row" for row table headers.
  • Use the caption tag to summarize the content displayed in the table, e.g., "Nutritional values in grain-based breakfast foods."
  • Captions should be sentence case.

Simple table

  • scope="row" ensures that it cannot be mistaken as a header for other cells in the same column. Use when you would like to associate the table header with the row, otherwise omit.
  • Copy the table template code below and update to match your data.

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <caption>
      Comparison between different types of coffee drinks.
    </caption>
    <thead class="thead-dark">
      <tr>
        <th scope="col">Coffee Types</th>
        <th scope="col">Milk</th>
        <th scope="col">Espresso Shots</th>
        <th scope="col">Milk Foam</th>
        <th scope="col">Water</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Cappuccino</th>
        <td>Yes</td>
        <td>2</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Macchiato</th>
        <td>No</td>
        <td>1</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Flat White</th>
        <td>Yes</td>
        <td>1</td>
        <td>No</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Latte</th>
        <td>Yes</td>
        <td>1</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
    </tbody>
  </table></div>
Comparison between different types of coffee drinks.
Coffee TypesMilkEspresso ShotsMilk FoamWater
CappuccinoYes2YesNo
MacchiatoNo1YesNo
Flat WhiteYes1NoNo
LatteYes1YesNo

Dense table

  • Use when you need a more compact table containing a lot of data.
  • Include the table-sm to create a dense style table.
  • Copy the table template code below and update to match your data.

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover table-sm">
    <caption>
      Comparison between different types of coffee drinks.
    </caption>
    <thead class="thead-dark">
      <tr>
        <th scope="col">Coffee Types</th>
        <th scope="col">Milk</th>
        <th scope="col">Espresso Shots</th>
        <th scope="col">Milk Foam</th>
        <th scope="col">Water</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Cappuccino</th>
        <td>Yes</td>
        <td>2</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Macchiato</th>
        <td>No</td>
        <td>1</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Flat White</th>
        <td>Yes</td>
        <td>1</td>
        <td>No</td>
        <td>No</td>
      </tr>
      <tr>
        <th scope="row">Latte</th>
        <td>Yes</td>
        <td>1</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
    </tbody>
  </table></div>
Comparison between different types of coffee drinks.
Coffee TypesMilkEspresso ShotsMilk FoamWater
CappuccinoYes2YesNo
MacchiatoNo1YesNo
Flat WhiteYes1NoNo
LatteYes1YesNo

Span multiple columns

  • Use colspan to specify the number of columns a cell should span.

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <caption>
      Caption text goes here.
    </caption>
    <thead class="thead-dark">
      <tr>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col" colspan="2">Heading</th>
      </tr>
      <tr></tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table></div>
Caption text goes here.
HeadingHeading
datadatadata

Span multiple rows

  • Use rowspan to specify the number of rows a cell should span.

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <caption>
      Caption text goes here.
    </caption>
    <thead class="thead-dark">
      <tr>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
      <tr></tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row" rowspan="2">data</th>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table></div>
Caption text goes here.
HeadingHeadingHeading
datadatadata
datadata

Table with single row

  • Use when there is a single row of data
  • Also consider using table with header cells in the first column only which may be a better alternative depending on how you wish to present your tabular data

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <caption>
      Caption text goes here.
    </caption>
    <thead class="thead-dark">
      <tr>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
      <tr></tr>
    </thead>
    <tbody>
      <tr>
        <th>data</th>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table></div>
Caption text goes here.
HeadingHeadingHeading
datadatadata

Table with header cells in the first column only

  • Table with header column on the left.

Usage

<div class="table-responsive">
  <table class="table table-bordered table-hover table-sm">
    <caption>
      Caption text goes here.
    </caption>
    <tbody>
      <tr>
        <th scope="row">Number</th>
        <td>00001468</td>
      </tr>
      <tr>
        <th scope="row">Description</th>
        <td>Engineering Services Price Agreements</td>
      </tr>
      <tr>
        <th scope="row">Bureau</th>
        <td>Environmental Services</td>
      </tr>
      <tr>
        <th scope="row">Planned Street Date</th>
        <td>May 22, 2020 12:00 am</td>
      </tr>
      <tr>
        <th scope="row">Actual Street Date</th>
        <td>May 22, 2020 8:43 am</td>
      </tr>
      <tr>
        <th scope="row">Bid Opening</th>
        <td>July 8, 2020 4:00 pm</td>
      </tr>
    </tbody>
  </table></div>
Caption text goes here.
Number00001468
DescriptionEngineering Services Price Agreements
BureauEnvironmental Services
Planned Street DateMay 22, 2020 12:00 am
Actual Street DateMay 22, 2020 8:43 am
Bid OpeningJuly 8, 2020 4:00 pm