Best Practices for Table Design

Best Practices - HTML

Best Practices - CSS

Best Practices - PDFs

Common Table Design Errors

Error #1: Not correctly marking up table headers

In this example, the table uses td elements for all cells, even though the first row consists of column headers:

Code AP Exam UAlbany Equivalent Credits
APART2D ART - 2D DESIGN A-ART 110, 010 3,3
APART3D ART - 3D DESIGN A-ART 115, 010 3,3

Error #2: Using an HTML layout table that does not make sense when linearized

In this example, the table used to line up the labels and fields of the form also orders the content so that it reads "First name, last name, this field is required, this field is required, edit text, edit text" when linearized:

First Name: Last Name:
(This field is required) (This field is required)

Error #3: Not using a scope attribute when role of cell is ambiguous

In this example, it would be difficult for assistive technology to determine whether the cell that reads "Student Status" is a column or row header:

Student Status Empire Commons Dutch Quad Indian Quad State Quad Freedom Apartments
Freshman Blue Purple Yellow Orange Red
Sophomore Purple Red Blue Yellow Orange