Table

Default table

HTML


<table class="orc-c-table ">

  <thead class="orc-c-table__header">

    <tr class="orc-c-table__header-row">
      <th scope="col" class="orc-c-table__header-cell ">Table Heading 1</th>
      <th scope="col" class="orc-c-table__header-cell ">Table Heading 2</th>
    </tr>
    <!-- orc-c-table__header-row -->

  </thead>
  <!-- end orc-c-table__header -->

  <tbody class="orc-c-table__body ">

    <tr class="orc-c-table__row ">

      <td class="orc-c-table__cell ">
        Value
      </td>
      <td class="orc-c-table__cell ">
        Value
      </td>

    </tr>
    <!-- end orc-c-table__row -->
    <tr class="orc-c-table__row ">

      <td class="orc-c-table__cell ">
        Value
      </td>
      <td class="orc-c-table__cell ">
        Value
      </td>

    </tr>
    <!-- end orc-c-table__row -->

  </tbody>
  <!-- end orc-c-table__body -->

  <tfoot class="orc-c-table__footer">

    <tr class="orc-c-table__footer-row">
    </tr>

  </tfoot>
  <!-- end orc-c-table__footer -->

</table>
<!--end orc-c-table-->

When to use

Use a table when presenting—and often comparing—several data points at once. The value in each cell should be limited to about 10 characters.

When to consider an alternative

If the content can be showcased more visually, perhaps use a tile list. If there are only two values to present, a split block would do nicely.

Class Name	Description
`orc-c-table` Required	Apply to table’s containing `table` tag. This establishes the layout the table header, body, and footer within.
`orc-c-table__header` Required	Apply to `thead` tag within `orc-c-table`. This establishes the header of the table that contains the main headings of each table column.
`orc-c-table__header-row` Required	Apply to `tr` within the table header. This represents the table row within the table header.
`orc-c-table__header-cell` Required	Apply to `th` within the table header. This represents a table cell within the table header.
`orc-c-table__body` Required	Apply to `tbody` tag within `orc-c-table`. This establishes the body of the table that contains the majority of the actual data values within the table.
`orc-c-table__row` Required	Apply to `tr` within the table body. This represents the table row within the table body.
`orc-c-table__cell` Required	Apply to `td` within the table body. This represents a table cell within the table body
`orc-c-table__footer`	Apply to `tfoot` tag within `orc-c-table`. This establishes the foot of the table that can contain additional information within the table.
`orc-c-table__footer-row`	Apply to `tr` within the table footer. This represents the table row within the table footer.
`orc-c-table__footer-cell`	Apply to `th` within the table footer. This represents a table cell within the table footer.

Default table `orc-c-table`

Usage

When to use

When to consider an alternative