Tables

Contents

  1. Get Started
  2. Grid
  3. Containers
  4. Navbars
  5. Positioning
  6. Responsive
  7. Typography
  8. Images
  9. Tables
  10. Buttons
  11. Forms
  12. Callouts
  13. Carousels

Default table

Tables receive no default styling in Odin, so any custom CSS you write will not conflict with default styling.

Basic table

If you do want some basic styling added without writing custom CSS, a class table-basic is provided to give some styling to tables. Here's an example.

Table title
Header 1 Header 2 Header 3 Header 4 Header 5
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 1, Col 5
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 Row 2, Col 5
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4 Row 3, Col 5
Here is some additional information 
  
<table class="table-basic">
  <caption>Table title</caption>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
      <td>Row 1, Col 4</td>
      <td>Row 1, Col 5</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
      <td>Row 2, Col 4</td>
      <>Row 2, Col 5</td>
    </tr>
    <tr>
      <td>Row 3, Col 1</td>
      <td>Row 3, Col 2</td>
      <td>Row 3, Col 3</td>
      <td>Row 3, Col 4</td>
      <td>Row 3, Col 5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="5">Here is some additional information</td>
    </tr>
  </tfoot>
</table>

Responsive Tables

Using the class table-stack will reflow the table so that each row is displayed using stacked columns. This will usually eliminate the need for sideways scrolling on small devices. The aria-label attribute is used to replace the function of the now hidden table head.

The following additional classes are provided so that tables stack on specified viewport and below: table-stack-xs, table-stack-sm, table-stack-md, and table-stack-lg. There is no table-stack-xl because table-stack serves the same purpose.

Here's an example of a table that will stack on small and extra-small viewports. Resize the browser window to see the effect.

Table title
Header 1 Header 2 Header 3 Header 4 Header 5
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 1, Col 5
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 Row 2, Col 5
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4 Row 3, Col 5
Here is some additional information 
  
<table class="table-basic table-stack-sm">
  <caption>Table title</caption>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td aria-label="Header 1">Row 1, Col 1</td>
      <td aria-label="Header 2">Row 1, Col 2</td>
      <td aria-label="Header 3">Row 1, Col 3</td>
      <td aria-label="Header 4">Row 1, Col 4</td>
      <td aria-label="Header 5">Row 1, Col 5</td>
    </tr>
    <tr>
      <td aria-label="Header 1">Row 2, Col 1</td>
      <td aria-label="Header 2">Row 2, Col 2</td>
      <td aria-label="Header 3">Row 2, Col 3</td>
      <td aria-label="Header 4">Row 2, Col 4</td>
      <td aria-label="Header 5">Row 2, Col 5</td>
    </tr>
    <tr>
      <td aria-label="Header 1">Row 3, Col 1</td>
      <td aria-label="Header 2">Row 3, Col 2</td>
      <td aria-label="Header 3">Row 3, Col 3</td>
      <td aria-label="Header 4">Row 3, Col 4</td>
      <td aria-label="Header 5">Row 3, Col 5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="5">Here is some additional information</td>
    </tr>
  </tfoot>
</table>

Row shading

The following classes are provided to automatically shade alternating rows of a table: shade-even-rows and shade-odd-rows. Here's an example of a table with odd rows shaded. Be sure to enclose rows to be shaded in tbody. Otherwise, rows in thead and/or tfoot may be unwantedly shaded.

Table title
Header 1 Header 2 Header 3 Header 4 Header 5
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 1, Col 5
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 Row 2, Col 5
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4 Row 3, Col 5
Here is some additional information 
  
<table class="table-basic table-stack-sm shade-odd-rows">
  <caption>Table title</caption>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td aria-label="Header 1">Row 1, Col 1</td>
      <td aria-label="Header 2">Row 1, Col 2</td>
      <td aria-label="Header 3">Row 1, Col 3</td>
      <td aria-label="Header 4">Row 1, Col 4</td>
      <td aria-label="Header 5">Row 1, Col 5</td>
    </tr>
    <tr>
      <td aria-label="Header 1">Row 2, Col 1</td>
      <td aria-label="Header 2">Row 2, Col 2</td>
      <td aria-label="Header 3">Row 2, Col 3</td>
      <td aria-label="Header 4">Row 2, Col 4</td>
      <td aria-label="Header 5">Row 2, Col 5</td>
    </tr>
    <tr>
      <td aria-label="Header 1">Row 3, Col 1</td>
      <td aria-label="Header 2">Row 3, Col 2</td>
      <td aria-label="Header 3">Row 3, Col 3</td>
      <td aria-label="Header 4">Row 3, Col 4</td>
      <td aria-label="Header 5">Row 3, Col 5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="5">Here is some additional information</td>
    </tr>
  </tfoot>
</table>