Tables

Note: This page explores different table styles, but does not focus on table accessibility. Accessible tables require additional attention, especially when more advanced layouts are used. Also note that tables are complex; not all combinations of layout conditions can be easily explored in just one page. The site designer might need to enhance the standard table styles for more advanced scenarios.

Data Table #1

The standard CSS framework comes with a small collection of built-in table designs that are easy for the site developer to update. This is one of the layouts. This layout is the one that is applied by default when a table is added to a page of content.

Data Table #2

The standard CSS framework comes with a small collection of built-in table designs that are easy for the site developer to update. This is one of the layouts.

Data Table #3

The standard CSS framework comes with a small collection of built-in table designs that are easy for the site developer to update. This is one of the layouts.

Data Table #4

The standard CSS framework comes with a small collection of built-in table designs that are easy for the site developer to update. This is one of the layouts.

Plain Table

Plain tables can be used for layout. Note that using tables for layout is generally bad idea for accessibility, but there are rare scenarios in which it might be semantically correct to use a table. E.g. a collection of profiles of people in a company with images and information could be properly represented as tabular data.

Simple Table

Note: By design, simple tables don't get treatment for special kinds of rows and cells or fancy layouts.

Unstyled and Manually Styled Tables

Tables that don't use any of the standard class names in the CSS framework can be manually built using the visual editor.