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 |