Sample Page - Data 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. When you copy any of these tables into your page you must edit the caption and summary. The caption can be edited in the Design view but the summary text must be edited in Code view. Click inside the table, then select the table tag on the tag selector, then switch to Code view and edit the text in the summary attribute.

Basic Data Table with Column Headings

Table caption (name and description of table)
You can describe your table here or in the context of your page. This table is read using the first row as the header for each column. (Replace this caption with your own description of the table)

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)
Apply the "directory" style to the <table> tag to remove the borders and add roll-over styling to rows. You can describe your table here or in the context of your page.  This table is read using the first row as the header for each column. (Replace this caption with your own description of the table)

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. (Replace this caption with your own description of the table)

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)
This table uses classes center and right to align text or images within a table cell. Default alignment is left. You can describe your table here or in the context of your page. This table is read using the first row as the header for each column. (Replace this caption with your own description of the table)

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 "table_noStyle" style to the <table> tag to remove the borders . You can describe your table here or in the context of your page.  This table is read using the first row as the header for each column. (Replace this caption with your own description of the table)

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 (Replace this caption with your own description of the table)

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