Grid

Variation

Classes

• lotusTable - Class assigned to the table tag
• lotusFirst - Used on any row where you need to get rid of the top border used between rows for lines.
• lotusLast - Used on the last row in a table when you want the last row underlined.
• lotusSort - Used on top row to create sortable headers.
• lotusFirstCell - Used on the first cell, for proper alignment
• lotusLastCell - Used on the last cell, for proper alignment
• lotusAltRow - Used on every other row to allow different styling, like background color
• lotusAltCell - Used on every other cell to allow different styling, like background color
• lotusSS - Used for superscripted elements
• lotusComplete - Used for todos, to style the text with strikethrough
• lotusRowHeader - Used when you want a row header. Goes on a th tag which is the first cell in a row.
• lotusSubHeader - Used on a th tag that spans all the columns in a table so that you can make a subheader row.

Basic Implementation

Use a table for the grid, assigned the class: lotusTable. Use regular rows and cells to create your table. Look at the classes listed above for further implementation details.

Create the sort headers using th tags. Assign the lotusSort and lotusFirst class on the header row (in the tr tag).

Variations

If you want subheaders in your table, put the lotusSubHeader class on a th tag that spans all rows in the table. The first row following this row should have a lotusFirst class assigned to it to turn off the border. The header text in this row would be wrapped in an h4 tag.

When you want a row header (similar to a vertical table), make the first cell in your row a th and assign the lotusRowHeader class, so we can apply a different style than the default column header style.

If your table doesn't have a paging bar following it, you may want to turn on the bottom row of the table. Apply the lotusLast class to the tr tag in this case.

Accessibility

For simple tables with just column headers or row headers, no additional markup beyond coding them using th tags is needed.

For tables with headers along the top of the table and along the left side of the table, put scope="col" on any column header th tags and scope="row" on any row header th tags.

For more complex tables where there are a mix of headings (see the sample on this page that has column, row and subheaders), assign a unique id to each th tag. Then, on each td tag, use the headers attribute with the value equal to any header ids that apply to it. Try to present the list of ids in a logical order. You can see an example of this on the code tab, in the Sample HTML - Variation code.

For table headers that sort the table, wrap the header text in a link and include a title tag that indicates the link will sort the table column. Add aria-sort="ascending|descending" on the link. It should only be on the link associated with the sorted column.

Put role="button," aria-expanded, and aria-controls on each link that wraps a show/hide icon. The aria-expanded attribute is set to true when the details row is showing, false otherwise. The aria-controls attribute is set to the unique id of the details row. The details row should have aria-hidden="true" when it is not showing. You can either remove this attribute or set aria-hidden="false" when it is showing (this second option is what is shown in the example code).

If you want to make your grid interactive, where the user can navigate and select individual cells, please follow the grid design pattern (or the tree grid design pattern when the rows are expandable). For interactive grids with sortable columns, see also the sortable grid design pattern.

Examples

• Grid view

Sample HTML

Sample HTML - Variation

CSS (tables.css)

Theme CSS (tablesTheme.css)

Our tables support a variety of views. This is the typical grid view.

January 19, 2011: updated accessibility information.

February 22,2012: added aria-sort to the code and description to the accessibility section. Also added link to the grid design patterns.