Accessible Table Builder

 

Simple table explanation

  • A simple table can have the first row as a set of headers and/or the first column as a set of headers.
  • The simple table uses the scope attribute with values of either col or row.
 

Complex table explanation

  • A complex table can have any number of rows as a set of headers and/or the first column as a set of headers.
  • The header rows must all be at the top with no data rows in-between.
  • The complex table uses the id and headers attributes with values appropriate to the data.
 

Common to both table types

  • Use , but not .
  • Can use the abbr to abbreviate the header name.
  • Styled with CSS to provide flexibility.
 

Blue table example

Oceana Airlines Dinner Service
Class of Service Salad Entree Dessert
Economy None Ham and Cheese Sandwich Packaged Cookies
Business Mixed Greens Chicken Satay or Beef Tips New York Style Cheesecake
First Caesar, Salad Nicoise, or Antipasto Salmon Basil Cr?me, Raspberry Balsamic Chicken, Boeuf En Daube Assorted Belgian Truffles
 

Grey table example

Oceana Airlines Dinner Service
Class of Service Salad Entree Dessert
Economy None Ham and Cheese Sandwich Packaged Cookies
Business Mixed Greens Chicken Satay or Beef Tips New York Style Cheesecake
First Caesar, Salad Nicoise, or Antipasto Salmon Basil Cr?me, Raspberry Balsamic Chicken, Boeuf En Daube Assorted Belgian Truffles

Acknowledgements to Jim Thatcher and aciello, Michael G. Web Accessibility for People with Disabilities. Lawrence, Kansas: CMP Books, 2000) for the data in the tables.