Tables
For information on usage and functionality, please see the Tables post in Slab.
Correct Formatting
The following are examples of well-formed tables.
| Col1 |
Col2 |
| Row1-1 |
Row1-2 |
| Row2-1 |
Row2-2 |
Header Column
| Col1 |
Row1-1 |
Row1-2 |
| Col2 |
Row2-1 |
Row2-2 |
| Col2 |
Row3-1 |
Row3-2 |
| ColRow |
Col1 |
Col2 |
| Row1 |
Data1-1 |
Data1-2 |
| Row2 |
Data2-1 |
Data2-2 |
Incorrect Formatting
Tables should be reserved for data that must be rendered in rows and columns. A table that has only one column is really just a list, and should be formatted as such. The following table is a one-column table that sets a width of 500 pixels. Because one-column tables are not handled by the responsive algorithm, this table will not resize for smaller screens; rather, it will remain 500 pixels wide.
Colspan/Rowspan
Though using rowspan and colspan attributes is valid in a table, our responsive table solution is unable to handle their usage.
| Col1 |
Col2 |
| Data1-1 |
| Data2-1 |
Data2-2 |
| Data3-2 |
Column Head Mismatch
Tables should have the same number of head columns as columns. In the case that the numbers do no match up, the table will not be made responsive.
| Col1 |
Col2 |
| Row1-1 |
Row1-2 |
Row1-3 |
| Row2-1 |
Row2-2 |
Row1-3 |