Sample Page - Tables

For more information on creating accessible data tables see the Accessibility > Row and Column section of the Web Authoring Resource Center.

Examples of Accessible Data Tables

These example tables contain captions and summaries. If you copy any of these tables into your page you must edit the caption and summary. The caption can be edited in the Edit view but the summary text must be edited in Source view. The summary text is located in the opening <table> tag within the html code.

Basic Data Table with Column Headings

Table caption (name and description of table)
This table is read using the first row as the header for each column. You can describe your table here in the caption or in the context of your page.
Description Date Location
Academic Senate Meeting May 25, 2205 Building 99 Room 1
Commencement Meeting December 15, 2205 Building 42 Room 10
Dean's Council February 1, 2206 Building 35 Room 5
Committee on Committees March 3, 2206 Building 1 Room 201
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et.
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Directory Listing Table - Roll Cursor Over an Item

Directory Listing (Table caption - name and description of table)
Applying the style "Directory style" to a table will remove the borders and add roll-over styling to rows. This table is read using the first row as the header for each column. You can describe your table here in the caption or in the context of your page.
Name Telephone Email Office
Dr. Sally 555-1234 sally@calpoly.edu 12-34
Dr. Steve 555-5678 steve@calpoly.edu 56-78
Dr. Kathy 555-9012 kathy@calpoly.edu 90-123

Column and Row Headings Example

Table caption (name and description of table)
This table is read using the first row as a column header and then the first item of the first column as a row header. You can describe your table here in the caption or in the context of your page.
Instructor Class Location
Dr. Sally Surgery 101 Building 2 Room 3
Dr. Steve Radiology 101 Building 2 Room 5
Dr. Kathy Orthopedics 101 Building 2 Room 20

Table Data Alignment Styles - Left, Middle, Right

Table caption (name and description of table)
Applying the styles "Table text, Ctr align" or "Table text, Rt align" will align text and image content to the center or right  within a table cell (left align is default).  To apply the styles select the content in a cell, then select from the Style dropdown. This table is read using the first row as the header for each column. You can describe your table here in the caption or in the context of your page.
Aligned Left Aligned Center Aligned Right
Academic Senate Meeting May 25, 2205 Building 99 Room 1
Commencement Meeting December 15, 2205 Building 42 Room 10
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus arcu, porta posuere, varius et.
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Table No Outline - H2

No Style Table Listing (Table caption - name and description of table)
Apply the style "Table, NoBorders style" to remove the borders from a table. This table is read using the first row as the header for each column. You can describe your table here or in the context of your page.
Day Time Location
Wednesday 3-6 pm Cal Poly Campus (follow U-Pick Signs)
Thursday 2:30-5pm Morro Bay Farmer's Market
Thursday 6:10-9pm Downtown SLO Farmer's Market
Saturday 8-10:30am Farmer's Market new Embassy Suites
Saturday 11am-2pm Cal Poly Campus (follow U-Pick signs)

Complex Data Table

Table caption (name and description of table)
This is an example of a Complex Data table that associates column headers with row headers that span multiple rows. The underlying HTML code of this table belies the necessary associations that make the table readable using a screen reading technology. You can describe your table here or in the context of your page.

NAME OF SYSTEM OR PORTAL CHANNEL

NAME OF SYSTEM OR ACTIVITY

STATUS DURING OUTAGE

DATA FROZEN AS OF

EXPECTED UP TIME

Personal Information

Addresses

View Only

1/18/2008

Go live date

Names

View Only

1/18/2008

Go live date

Phone Numbers

View Only

1/18/2008

Go live date

Emergency Contacts

View Only

1/18/2008

Go live date

Group Leave Balance

Group Leave Balances

View Only

12/31/2007

3/1/2008

Leave/CTO Balances

Leave and CTO Balances

View Only

12/31/2007

3/1/2008

Faculty Course Info

Class Search/Browse Catalog

 

 

 

Record Grades

 

 

 

Access Class Roster

 

 

 

Student Data

 

 

 

View My Class Schedule

 

 

 

View My Weekly Schedule

 

 

 

Enrollment Planning

View Course Catalog and Schedule of Classes

 

 

 

Student Pay

Timekeeper Access

Unavailable

1/18/2008

 

PolyData

????

 

 

 

 

 

 

 

PolyProfile

 

 

 

 

 

 

 

 

 

 

 

 

 

Related Content

Spotlight

Cal Poly students under green umbrella serving food

More on Spotlight

Spotlight

More on Spotlight

Admissions

Go to the Admissions website

Link to the Admissions Website for information on selection criteria, application deadlines, creating your VIP page and more!

Admissions