Tables

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


Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

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

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »