Table

Tables display tabular data in a basic grid composed of cells, columns, and rows.

    Usage

    Header cell Header cell Header cell
    Cell Cell Cell
    Cell Cell Cell 
    <table class="c-table border bg-white">
  <thead>
    <tr>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
    </tr>
    <tr>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
    </tr>
  </tbody>
</table>
    Show more

    Implementation

    TypeName
    Elements
    Table.c-table
    Header cells.c-table__th
    Cell.c-table__td
    Modifiers
    Colorsc-table--dark
    Cellc-table__td--narrow
    StatesNone

    Examples

    Table in Box

    Box header

    Header cell Header cell Header cell
    Cell Cell Cell
    Cell Cell Cell 
    <div class="c-box">
  <h1 class="c-box__header">Box header</h1>
  <table class="c-table">
    <thead>
      <tr>
        <th class="c-table__th">Header cell</th>
        <th class="c-table__th">Header cell</th>
        <th class="c-table__th">Header cell</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="c-table__td">Cell</td>
        <td class="c-table__td">Cell</td>
        <td class="c-table__td">Cell</td>
      </tr>
      <tr>
        <td class="c-table__td">Cell</td>
        <td class="c-table__td">Cell</td>
        <td class="c-table__td">Cell</td>
      </tr>
    </tbody>
  </table>
</div>
    Show more

    Modifiers

    with narrow cells

    Header cell Header cell Header cell
    Cell Cell Cell
    Cell Cell Cell 
    <table class="c-table">
  <thead>
    <tr>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="c-table__td c-table__td--narrow">Cell</td>
      <td class="c-table__td c-table__td--narrow">Cell</td>
      <td class="c-table__td c-table__td--narrow">Cell</td>
    </tr>
    <tr>
      <td class="c-table__td c-table__td--narrow">Cell</td>
      <td class="c-table__td c-table__td--narrow">Cell</td>
      <td class="c-table__td c-table__td--narrow">Cell</td>
    </tr>
  </tbody>
</table>
    Show more

    with dark borders

    Header cell Header cell Header cell
    Cell Cell Cell
    Cell Cell Cell 
    <table class="c-table c-table--dark">
  <thead>
    <tr>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
      <th class="c-table__th">Header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
    </tr>
    <tr>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
      <td class="c-table__td">Cell</td>
    </tr>
  </tbody>
</table>
    Show more