Vertical Table

A vertical table can be used to display data with labels on the side of the information presented.

Sample
Implementation
Code
History

Classes

lotusVertTable - Class assigned to the table

Basic Implementation

Use a table, assigned the class lotusVertTable.

Create your labels using th tags.

Put the data in a td tag.

Accessibility

Use th tags for the first cell in each table row. If your vertical table contains a table cell with a colspan (like this example does), add scope="row" to the th tag.

Examples

In a section

Sample HTML

CSS (tables.css)

Theme CSS (tablesTheme.css)

December 6, 2011 - Added scope to th tags (since there is a table cell with a colspan in this example the table is considered a complex table) and updated the accessibility section to explain this.