Table-Style Module

Overview

The table-style module creates a table layout using HTML div tags rather than HTML table tags. They are a useful layout option for non-data content. Some types of non-data content can be easier to scan and read when presented in a table-style layout.

It is important to note the difference between table-style modules and standard tables and when to use each. The table-style module should be used for layout purposes only and with content that does not qualify as data. Standard HTML tables should be used only for presenting data and with the appropriate 508 tagging. A more detailed comparison follows the example.

Table-Style Module Example

Comparison with Standard Tables

Wondering when to use a table-style module instead of a standard HTML table? First let’s review why and when to use standard tables.

Standard Tables

Standard tables should be used for presenting data. Tables organize data with logical relationships in grids. Use them for information that needs to be categorized by both columns and rows.

When using a standard table, it is important to apply 508 tagging.

When to use:

• You need both row headers and column headers (note that standard tables must have at least one type of header for 508 compliance)
• The content is tabular data — in other words:
  • Each row or column of cells shares a common attribute
  • You can change the order of the data rows/columns
  • You can transpose the axes
• Each data cell contains only text and/or numbers (no images)
• Each data cell contains only one piece of information (no bulleted lists, for example)

If your content meet these criteria, use the WCMS table editor tool to generate a table that uses standard HTML table tags. You can learn more about the table editor from the Data Table topic in this Gallery.

The content in the table here meets these criteria, so a standard table is appropriate. This table was created using the table editor tool.

Table-Style Modules

Some types of non-data content can be easier to scan and read when presented in a table-style layout.

The table-style module should be used for layout purposes only and with content that does not qualify as data. When you are presenting data, it is important that you use a standard HTML table with the appropriate 508 tagging.

When to use:

• For layout purposes only
• For short chunks of content (not data)
• For content with only a row header or a column header, not both (the examples at the bottom of this page show all header options)
• When you need only 2, 3, or 4 columns
• For content with only a few rows

Guidance for Using Table-Style Modules

• Headers: Table-style modules can have row headers or column headers, not both.  The examples on this page illustrate the header options.
• Columns: Plan to use no more than four columns (the maximum supported by the WCMS).  If your module has row headers, they count as the first column.
• Background colors: For your headers, you can select a background using any theme color or any of the grays or you can choose none. For alternating rows, you can choose any of the lighter colors or grays or choose none.

Examples

First Row as Header

Past Due Accounts

First Column as Header

Site Content Roles

No Row or Column Headers

Urgent versus Important Matrix