Tables

A table element allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Basic

Tables are built from a mixin, but since tables don't rely on any classes to build, you can use the table element and customize with your CSS. If you are using SCSS, the variables will help you customize the look and feel.

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 Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Advanced

Suit offers usage of Tablesaw, a set of plugins for responsive tables.

Stack mode

Stack mode stacks the table headers to a two column layout with headers on the left when the viewport width is less than 40em (640px).

Order # Order Date Order Status Total Payment Method View
10116998 1/3/2012 10:45:48 AM CANCELLED $30.16 Credit Card
291292 2/8/2008 1:10:28 PM CANCELLED $20 Net Terms
291292 11/2/2012 8:29:48 PM SHIPPED $303.45 Prepayment

Swipe mode and Data persist

Swipe mode allows the user to swipe between columns on mobile devices or use the left and right buttons to navigate the columns. Appending data-mode="swipe" to the table element definiton enables this functionality.

Data persist is useful for keeping the furthest left column's data in view for reference. Appending data-persists to a th element will ensure that columns' appearance when navigating the table using swipe or the navigation buttons.

Play:1

$199

Play:3

$299

Play:5

$399
Crystal clear Hi-Fi sound
How loud do you want your music? LOUD REALLY LOUD CRAZY LOUD
How deep do you want your bass? DEEP REALLY DEEP CRAZY DEEP
Use as Home Theatre Rear Speakers
Line In
Humidity Resistant
Wall Mount

Mini Map

Appending data-minimap to the table element definiotion adds a series of small dots to show which columns are currently visible and which are hidden. Only available on swipe tables.

Order # Order Date Order Status Total Payment Method View
10116998 1/3/2012 10:45:48 AM CANCELLED $30.16 Credit Card
291292 2/8/2008 1:10:28 PM CANCELLED $20 Net Terms
291292 11/2/2012 8:29:48 PM SHIPPED $303.45 Prepayment
NOTE: Minimap can and should be used in conjunction with data persist.

Themes

You can add classes to a table element's class attribute to change the appearance of the table element and its cells.

Light

Adding light to a table element's class attribute will give your tables a color scheme that has light colored backgrounds and dark colored text.

Serial Number Product Registration Date
00-OE-58-04-51-1D:5 SONOS CONTROL (CR200) 11/2/2012 8:29:48 PM
00-93-7D-VN-82-0X:2 SUB BG (SUB G) 7/18/2012 5:36:14 PM
00-DE-12-24-5Q-82:8 SONOS PLAYBAR (ZPSS9) 3/4/2013 10:42:05 PM

Dark

Adding dark to a table element's class attribute will give your tables a color scheme that has dark colored backgrounds and light colored text.

Serial Number Product Registration Date
00-OE-58-04-51-1D:5 SONOS CONTROL (CR200) 11/2/2012 8:29:48 PM
00-93-7D-VN-82-0X:2 SUB BG (SUB G) 7/18/2012 5:36:14 PM
00-DE-12-24-5Q-82:8 SONOS PLAYBAR (ZPSS9) 3/4/2013 10:42:05 PM

Table border

Add table-border to the table element's class attribute to add a border around the outer edge of the table element.

Serial Number Product Registration Date
00-OE-58-04-51-1D:5 SONOS CONTROL (CR200) 11/2/2012 8:29:48 PM
00-93-7D-VN-82-0X:2 SUB BG(SUB G) 7/18/2012 5:36:14 PM
00-DE-12-24-5Q-82:8 SONOS PLAYBAR (ZPSS9) 3/4/2013 10:42:05 PM

Cell borders

Add cell-borders to the table element's class attribute to add a border to the right and bottom of each cell with exception to the last column of each row and the last cell of each column.

Serial Number Product Registration Date
00-OE-58-04-51-1D:5 SONOS CONTROL (CR200) 11/2/2012 8:29:48 PM
00-93-7D-VN-82-0X:2 SUB BG(SUB G) 7/18/2012 5:36:14 PM
00-DE-12-24-5Q-82:8 SONOS PLAYBAR (ZPSS9) 3/4/2013 10:42:05 PM

Centering

Add center-inner-cell-data to the table element's class attribute to center the content in the table's cells with exception to the table's header row and the first column.

Features Play:1 Play:3 Play:5
Crystal clear Hi-Fi sound
How loud do you want your music? LOUD REALLY LOUD CRAZY LOUD
How deep do you want your bass? DEEP REALLY DEEP CRAZY DEEP
Use as Home Theatre Rear Speakers
Line In
Humidity Resistant
Wall Mount

To center all cells in a table, add center-cell-data to the table element's class attribute.

Features Play:1 Play:3 Play:5
Crystal clear Hi-Fi sound
How loud do you want your music? LOUD REALLY LOUD CRAZY LOUD
How deep do you want your bass? DEEP REALLY DEEP CRAZY DEEP
Use as Home Theatre Rear Speakers
Line In
Humidity Resistant
Wall Mount