Styleguides

Shared Assets & Docs

Menu

Unstyled Table

This is what tables look like without any modifying classes.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish
# First Name Last Name Language 
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>

Styled Table

Add a .table class to the table to spruce it up a bit.

Also, add .responsive-table and data-label attrs on individual cells to create responsive tables.

If you're going to use a <tfoot>, add a .table-with-foot class to make things look right (CSS has no selector to determine the presence of a child element...)

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish
# First Name Last Name Language 
<table class="table responsive-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td data-label="First Name">Some</td>
      <td data-label="Last Name">One</td>
      <td data-label="Language">English</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        ...
      </td>
    </tr>
  </tfoot>
</table>

Striped Table

Add a .striped-table class to the table to add zebra striped rows.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish 
<table class="table striped-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>

Boxed Table

Add a .box class to the table wrap it in a box.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish
# First Name Last Name Language 
<table class="table responsive-table box">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>

Hover Highlights

Add a .highlight-rows class to highlight rows on hover.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish 
<table class="table highlight-rows box">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>

Highlight Columns

Highlighting columns is a bit trickier but here's how you set it up:

  1. Add .highlight-cols to the <table>.
  2. Create <colgroup> elements for the number of columns in the table.
  3. Add a data-toggle-columns attribute (requires the base localmed.js).
# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish 
<table class="table highlight-cols box" data-toggle-columns>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>

Highlight Rows & Columns

And of course, you can put them both together:

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
4 Jose Gonzales Spanish 
<table class="table highlight-rows highlight-cols box" data-toggle-columns>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    ...
  </tbody>
</table>