Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

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

Open Header Style Options

Tables with Open Header Area

Style: table-openhead-altbkgd (TH Scope= Row)

  • Blue header text on white background
  • Horizontal dark gray border under header
  • Header has slightly larger font
  • Table will fit 100% of area
  • Alternating row colors in gray
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641
adjusted to scope row

Style: table-openhead-hzlines (TH Scope= Row)

  • Blue header text on white background
  • Horizontal dark gray border under header
  • Header has slightly larger font
  • Table will fit 100% of area
  • Horizontal light gray lines one each row
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641

Style: table-openhead-alllines (TH Scope= Row)

  • Blue header text on white background
  • Horizontal dark gray border under header
  • Header has slightly larger font
  • Table will fit 100% of area
  • Light gray lines one each cell
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641
Gray Header Style Options

Tables with Gray Header Area

Style: table-grayhead-altbkgd (TH Scope= Row)

  • White header text on dark gray background
  • Header has slightly larger font
  • Table will fit 100% of area
  • Alternating row colors in light gray
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641

Style: table-grayhead-hzlines (TH Scope= Row)

  • White header text on dark gray background
  • Header has slightly larger font
  • Table will fit 100% of area
  • Horizontal light gray lines on each row
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641

Style: table-grayhead-alllines (TH Scope= Row)

  • White header text on dark gray background
  • Header has slightly larger font
  • Table will fit 100% of area
  • Light gray lines on each cell
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641
Blue Header Style Options

Tables with Blue Header Area

Style: table-bluehead-altbkgd (TH Scope= Row)

  • White header text on dark blue background
  • Header has slightly larger font
  • Fits 100% of area
  • Alternating row colors in light blue
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641

Style: table-bluehead-hzlines (TH Scope= Row)

  • White header text on dark blue background
  • Header has slightly larger font
  • Table will fits 100% of area
  • Horizontal light gray lines on each row
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641

Style: table-bluehead-alllines (TH Scope= Row)

  • White Header text on dark blue background
  • Header has slightly larger font
  • Table will fits 100% of area
  • Light gray lines on each cell
This is the caption field.
E-MailPhone
Cumming Campus admissions-cmg@ung.edu 706-864-1800
Dahlonega Campus admissions-dah@ung.edu 706-864-1800
Gainesville Campus admissions-gvl@ung.edu 678-717-3641
Oconee Campus admissions-ocn@ung.edu 678-717-3641
Where to Use

The diagrams below will help you determine where this block can be used. The "Y" inside the box, green yes square, means this block can go in to this column or space. The ''N' inside the box, red no square means this block can't go in this column or space.

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top