Use tables for communicating data. Do not use tables as a way to create columns.
We have three variations of tables.
| Variation | Best Use For Text | Best Use for Header | Responsive |
|---|---|---|---|
| Default | Minimal Width | n/a | Scroll horizontally |
| Stacked | More Width | Important | Columns stack vertically with header repeated for each |
| Tube | More Width | Not Important | Columns stack vertically with header hidden |
Select snippet: Table.
| Expense Category | In-State and Reciprocity* |
|---|---|
| Tuition/Fees | $XX,XXX |
| Books/Supplies | $XX,XXX |
| Room/Board | $XX,XXX |
| Transportation | $XX,XXX |
| Personal/Miscellaneous | $XX,XXX |
| Total | $XX,XXX |
Use the default table for tables with minimal text or for content that doesn't have table headers. If the content is too long, it will require side scrolling to view on smaller screens.
Select snippet: Table - Stacked
| Expense Category | In-State and Reciprocity* | Non-Resident |
|---|---|---|
| Tuition/Fees | $XX,XXX | $XX,XXX |
| Books/Supplies | $XX,XXX | $XX,XXX |
| Room/Board | $XX,XXX | $XX,XXX |
| Transportation | $XX,XXX | $XX,XXX |
| Personal/Miscellaneous | $XX,XXX | $XX,XXX |
| Total | $XX,XXX | $XX,XXX |
Use the stacked table for tables with more text. On smaller screens, the table headers repeat for each row.
Select snippet: Table - Tube
| Expense Category | In-State and Reciprocity* | Non-Resident |
|---|---|---|
| Tuition/Fees | $XX,XXX | $XX,XXX |
| Books/Supplies | $XX,XXX | $XX,XXX |
| Room/Board | $XX,XXX | $XX,XXX |
| Transportation | $XX,XXX | $XX,XXX |
| Personal/Miscellaneous | $XX,XXX | $XX,XXX |
| Total | $XX,XXX | $XX,XXX |
Use the tube table for tables with more text and headers are unnecessary. On smaller screens, the table headers are hidden and the content collapses to single row.
<table class="table table-striped" summary="Compare and Contrast to Academy and College">