O3 World Component Library

Generic Table 

<!-- NOTE: All inline styles should be removed prior to implimentation -->
<h3>Generic Table</h3>
<table summary="A Generic Table">
    <caption>This is a Generic Table Caption.</caption>
    <thead>
        <tr>
            <th scope="col">Column 1 content</th>
            <th scope="col">Column 2 content</th>
            <th scope="col">Column 3 content</th>
            <th scope="col">Column 4 content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 content</td>
            <td>Row 1 content</td>
            <td>Row 1 content</td>
            <td>Row 1 content</td>
        </tr>
        <tr>
            <td>Row 2 content</td>
            <td>Row 2 content</td>
            <td>Row 2 content</td>
            <td>Row 2 content</td>
        </tr>
        <tr>
            <td>Row 3 content</td>
            <td>Row 3 content</td>
            <td>Row 3 content</td>
            <td>Row 3 content</td>
        </tr>
        <tr>
            <td>Row 4 content</td>
            <td>Row 4 content</td>
            <td>Row 4 content</td>
            <td>Row 4 content</td>
        </tr>
    </tbody>
</table>

<h3 style="margin-top: 50px">Generic Table with row headers</h3>
<table summary="A Generic Table with row headers">
    <caption>Generic Table with row headers Caption.</caption>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <th scope="row">Row 3</th>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <th scope="row">Row 4</th>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
    </tbody>
</table>
 
<!-- NOTE: All inline styles should be removed prior to implimentation -->
<h3>Generic Table</h3>
<table summary="A Generic Table">
  <caption>This is a Generic Table Caption.</caption>
  <thead>
    <tr>
      <th scope="col">Column 1 content</th>
      <th scope="col">Column 2 content</th>
      <th scope="col">Column 3 content</th>
      <th scope="col">Column 4 content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 content</td>
      <td>Row 1 content</td>
      <td>Row 1 content</td>
      <td>Row 1 content</td>
    </tr>
    <tr>
      <td>Row 2 content</td>
      <td>Row 2 content</td>
      <td>Row 2 content</td>
      <td>Row 2 content</td>
    </tr>
    <tr>
      <td>Row 3 content</td>
      <td>Row 3 content</td>
      <td>Row 3 content</td>
      <td>Row 3 content</td>
    </tr>
    <tr>
      <td>Row 4 content</td>
      <td>Row 4 content</td>
      <td>Row 4 content</td>
      <td>Row 4 content</td>
    </tr>
  </tbody>
</table>

<h3 style="margin-top: 50px">Generic Table with row headers</h3>
<table summary="A Generic Table with row headers">
  <caption>Generic Table with row headers Caption.</caption>
  <thead>
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row 1</th>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <th scope="row">Row 2</th>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <th scope="row">Row 3</th>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <th scope="row">Row 4</th>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>
 
/* No context defined for this component. */
  • Content: 
    $table-header-color: #e1e1e1;
$table-border-color: #a3a7aa;

table {
  border: 1px solid $table-border-color;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  // using @extend in case a class can't be manually attached <caption>
  // `position: relative` fixes issue with table borders
  caption {
      @extend .u-sr-only;

      position: relative;
  }

  tr { background-color: color(default, light); }
  th { background-color: $table-header-color; }

  th,
  td {
      border: 1px solid $table-border-color;
      padding: 9px 12px;
      vertical-align: top;
      text-align: left;
      white-space: nowrap;

      &:first-child { border-left: 0; }
      &:last-child { border-right: 0; }
  }

  thead {

        tr:last-child th,
        tr:last-child td { border-top: 0; }

        th {
          padding-top: 12px;
          padding-bottom: 12px;
        }
    }

    tbody {

        tr:last-child th,
        tr:last-child td { border-bottom: 0; }

        tr:nth-child(odd) td { background-color: color(neutral, lightest); }
    }

    tfoot {

        tr:last-child th,
        tr:last-child td { border-bottom: 0; }
    }
}
  • URL: /components/raw/generic-table/_generic-table.scss
  • Filesystem Path: components/generic-table/_generic-table.scss
  • Size: 1.2 KB
  • Content: 
    <!-- NOTE: All inline styles should be removed prior to implimentation -->
<h3>Generic Table</h3>
<table summary="A Generic Table">
  <caption>Generic Table</caption>
  <thead>
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

<h3 style="margin-top: 50px">Generic Table with row headers</h3>
<table summary="A Generic Table with row headers">
  <caption>Generic Table</caption>
  <thead>
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row 1</th>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <th scope="row">Row 2</th>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <th scope="row">Row 3</th>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <th scope="row">Row 4</th>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>
  • URL: /components/raw/generic-table/generic-table.html
  • Filesystem Path: components/generic-table/generic-table.html
  • Size: 1.6 KB

Usage

A Generic Table that includes column headers as well as a summary attribute to describe the purpose of the data in the table. For accessibility purposes, be sure to include a caption element in each table.

Labelling Expectations

  • Each table should include a caption that is placed directly as a child of the table element.
  • If a table row has a header, the attribute scope="row" should be added to the row header.

Focus Expectations

A table is a static tabular structure, and as such, is not interactive. Its cells are neither focusable nor selectable.

Keyboard Expectations

  • Control + Option ← → ↑ ↓ = Navigate through table row and column content with screen reader
  • Note: Navigating with the ↑ ↓ arrows could cause some screen readers to skip over the caption.

Screen Reader Expectations

When interacting with a table, screen readers should announce the following information:

  • Table caption
  • Table cell content, associating rows with columns if applicable

Tab Order Expectations

  • Any widget contained in a table is a separate stop in the page tab navigation order.