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. Contact the webteam via ServiceNow (login required) 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.

adapted from: http://webdesign.about.com/od/tables/a/aa122605.htm

Tables with Blue Header Area

Alternating Background 

<table class="tablesaw tablesaw-stack tbl-bh-alt" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

Horizontal Lines

<table class="tablesaw tablesaw-stack tbl-bh-hz" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

All Lines

<table class="tablesaw tablesaw-stack tbl-bh-all" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

Tables with Gray Header Area

Alternating Backgrounds

<table class="tablesaw tablesaw-stack tbl-gh-alt" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

Horizontal Lines

<table class="tablesaw tablesaw-stack tbl-gh-hz" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

All Lines

<table class="tablesaw tablesaw-stack tbl-gh-all" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, 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">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

Horizontal Lines

<table class="tablesaw tablesaw-stack tbl-oh-hz" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

All Lines

<table class="tablesaw tablesaw-stack tbl-oh-all" data-tablesaw-mode="stack">

This is the caption
Campus E-Mail Location
Cumming advising-cmg@ung.edu Room 242
Dahlonega advising-dah@ung.edu Chestatee Building, Suite 162
Gainesville advising-gvl@ung.edu Student Center, Room 134

At the University of North Georgia, we deeply value and uphold the cherished right of every American to freely express themselves. It is a hallmark of our history, our tradition, and permeates our culture. As a distinguished Senior Military College, with a legacy spanning over 150 years, we take great pride in our role of cultivating leaders who tirelessly defend these fundamental freedoms for all citizens.  The legacy of our graduates in this regard is second to none.

As campus leaders, our primary responsibility is to cultivate an academic environment that ensures this exchange of ideas and the safety of our community. Across all five campuses, we are committed to fostering a welcoming atmosphere where individuals feel empowered to freely express themselves and engage in exploration and learning. However, it is essential that these rights are exercised in a manner that upholds our academic mission, preserves the safety of all, and is in accordance with our institutional policies, without unlawful behavior. This means breaking the law, harassment, intimidation, trespassing, violence, and other criminal acts will not be tolerated at the University of North Georgia.

Together, let's uphold the principles of respect, understanding, and civility as we equip our students to walk toward their purpose.

Bold Forward!

Establishing Connection...
AskNigel