Examples: 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 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.

**Directory Listing**
Apply the "directory" style to the `<table>` tag to produce this standard CAED 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

**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

**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 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	????
PolyData
PolyProfile

Table Alignment Styles

The table below is centered on the page using the "center" style, applied to the <table> tag. To accomodate Internet Explorer, apply the align="center" attribute to the <table> tag.

**Table Caption Aligned Center**
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)
Aligned Left	Aligned Middle	Aligned Right
Dr. Sally	Surgery 101	Building 2 Room 3
Dr. Steve	Radiology 101	Building 2 Room 5
Dr. Kathy	Orthopedics 101	Building 2 Room 20

College of Architecture & Environmental Design

Website Support

Examples: Tables

Table Alignment Styles

Related Content

News & Events

Connections Magazine

CAED Diversity Equity & Inclusion

Giving to the CAED

Hearst Lecture Series