5.4 Tables
Usage
- When applicable, campuses should be the first column so the information makes sense and is easy to read on mobile.
- Tables should be used to present tabular data.
- In general, tables do not work very well in responsive sites due to the variety of screen sizes. However, with proper planning your tables can function correctly when sized down for mobile viewing. See these special instructions for creating accessible, responsive tables.
Styles
There are currently nine different style variations for presenting tables on ung.edu. See below for details and samples.
Your Contents Are Tabular Data If...
- ...the information would make sense to record or track in a spreadsheet, it is almost certainly tabular data.
- ...you need header fields at the top of columns of data or to the left of rows of data, then it is tabular and a table should be used.
- ...the contents makes sense in a database, especially a very simple database, and you just want to display the data, and not "make it pretty", then a table is acceptable.
You Should Not Use a Table If...
- ...the main purpose of the table is to position the contents on the page in some way. For example, to add spacing around an image, to place "bullet" icons on a list, line up items or to force a block of text to act like a pull quote. if you need assistance.
- ...you want to use the background colors or images simply to augment the page, rather than to call out the data.
Tables with Blue Header Area
Alternating Background
<table class="tablesaw tablesaw-stack tbl-bh-alt" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
Horizontal Lines
<table class="tablesaw tablesaw-stack tbl-bh-hz" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
All Lines
<table class="tablesaw tablesaw-stack tbl-bh-all" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
Tables with Gray Header Area
Alternating Backgrounds
<table class="tablesaw tablesaw-stack tbl-gh-alt" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
Horizontal Lines
<table class="tablesaw tablesaw-stack tbl-gh-hz" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
All Lines
<table class="tablesaw tablesaw-stack tbl-gh-all" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
Tables with Open Header Area
Note: Do not use on dark blue backgrounds
Alternating Backgrounds
<table class="tablesaw tablesaw-stack tbl-oh-alt" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
Horizontal Lines
<table class="tablesaw tablesaw-stack tbl-oh-hz" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |
All Lines
<table class="tablesaw tablesaw-stack tbl-oh-all" data-tablesaw-mode="stack">
| Campus | Location | |
|---|---|---|
| Cumming | advising-cmg@ung.edu | Room 242 |
| Dahlonega | advising-dah@ung.edu | , Suite 162 |
| Gainesville | advising-gvl@ung.edu | , Room 134 |