Information Table

An information table is a table used to present data that is styled differently to draw attention to it, like information presented at the top of the page before the regular data is displayed.

Classes

lotusTable - Class assigned to the table
lotusInfoTable - Additional class assigned to the table

Basic Implementation

Use a table, assigned the multiple classes of lotusTable and lotusInfoTable.

Use an h2 tag inside of a td tag to give a header to the table. (Don't use a th tag because this is considered a layout table.)

Create the data using regular table rows and cells. No additional classes are needed for alignment.

Accessibility

Put role="presentation" on the table tag. Do not include a summary attribute on the table.

Examples

Announcements

Sample HTML

CSS (tables.css)

Theme CSS (tablesTheme.css)

This component was created because of the neeed of an announcement component, which was essentially presenting the same data as our tables, but with a different look.

January 19, 2012 - Made the tags lists into ARIA lists.