Tables

Tables are a set of columns and rows that lay out information. Use Tables for tabular data that is intended for comparison. If your data is only label value pairs, consider the Dictionary component instead.

Information

  • The Table patterns will squish the spacing to some degree, but will mostly preserve their width on narrow viewports.
  • Tables will become scrollable if the content overflows.
  • If your content does not fit well with this component on narrow viewports, you can switch to an alternate component.

Column Comparison

When the data is meant to be compared column to column. This is the standard Table style.

Column Heading Column Heading Column Heading
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<div class="sprk-b-TableContainer">
  <table class="sprk-b-Table sprk-b-Table--spacing-medium sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <tr>
        <th>Column Heading</th>
        <th>Column Heading</th>
        <th>Column Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>

Grouped Columns

When there is a need to group headings together.

Column Heading Column Heading Column Heading
SubHeading SubHeading SubHeading
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
<div class="sprk-b-TableContainer">
  <table class="sprk-b-Table sprk-b-Table__grouped-columns sprk-b-Table--spacing-small sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <tr>
        <th rowspan="2">Column Heading</th>
        <th colspan="3">Column Heading</th>
        <th rowspan="2">Column Heading</th>
      </tr>
      <tr>
        <th class="sprk-b-Table__grouped-column">SubHeading</th>
        <th class="sprk-b-Table__grouped-column">SubHeading</th>
        <th class="sprk-b-Table__grouped-column">SubHeading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
    </tbody>
  </table>
</div>

Row Comparison

When the data is meant to be compared row to row.

Column Heading Column Heading Column Heading
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
<div class="sprk-b-TableContainer">
  <table class="sprk-b-Table sprk-b-Table--row-comparison sprk-b-Table--spacing-medium sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <tr>
        <th class="sprk-b-Table__empty-heading"></th>
        <th>Column Heading</th>
        <th>Column Heading</th>
        <th>Column Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>