Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course).

Basic

You can create a table using minimal markup.

HTML

<table>
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>

Rendered HTML

Customize With Sass

Tables can be easily customized using our Sass variables.

$include-html-table-classes: $include-html-classes !default;

// These control the background color for the table and even rows
$table-bg: #fff;
$table-even-row-bg: #f9f9f9;

// These control the table cell border style
$table-border-style: solid;
$table-border-size: 1px;
$table-border-color: #ddd;

// These control the table head styles
$table-head-bg: #f5f5f5;
$table-head-font-size: rem-calc(14);
$table-head-font-color: #222;
$table-head-font-weight: bold;
$table-head-padding: rem-calc(8 10 10);

// These control the row padding and font styles
$table-row-padding: rem-calc(9 10);
$table-row-font-size: rem-calc(14);
$table-row-font-color: #222;
$table-line-height: rem-calc(18);

// These are for controlling the display and margin of tables
$table-display: table-cell;
$table-margin-bottom: rem-calc(20);

Note: rem-calc(); is a function we wrote to convert px to rem. It is included in _functions.scss.

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/tables";