Table-Style Module

Best Practices

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

Icon

Icon

Icon

Description

Description

Description

When to Use

When to Use

When to Use

Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum.
  • Dolor sit amet.
When to Use
  • Lorem ipsum.
  • Dolor sit amet.
Icon

Lorem ipsum dolor sit amet.

Description

Lorem ipsum dolor sit amet.

  • Lorem ipsum.
  • Dolore magna.
When to Use
  • Lorem ipsum.
  • Dolore magna.
Icon

Sed do eiusmod incididunt ut labore et dolore magna aliqua.

Description

Sed do eiusmod incididunt ut labore et dolore magna aliqua.

  • Lorem ipsum dolor sit amet.

 

When to Use
  • Lorem ipsum dolor sit amet.

 

  • Building in the WCMS
    See guidelines for building table-style modules in the WCMS.
  • Data Table
    Find out how to use the WCMS table tool to create standard data  tables with appropriate HTML tagging.
  • TP4 UX Best Practices [PPT - 14 MB]
    For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.

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.

Example Data Table Created with Table Editor
Name Favorite Color Favorite Holiday Birth Day
Darlene Chartreuse Christmas December 27
Larry Mauve Thanksgiving May 5
John Coral Halloween November 13
Sandra Turquoise Christmas August 4

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

The rows and columns in these examples are all created with table-style modules. Adjust your browser width to see how they respond in mobile viewports.

First Row as Header

Past Due Accounts

How Long Past Due

How Long Past Due

How Long Past Due

Automated Email Notice

Automated Email Notice

Automated Email Notice

Account Manager Response

Account Manager Response

Account Manager Response

31-60 days

How Long Past Due

31-60 days

Reminder to pay within 10 days

Automated Email Notice

Reminder to pay within 10 days

Calls the customer to discuss the situation

Account Manager Response

Calls the customer to discuss the situation

61-90 days

How Long Past Due

61-90 days

Notification that their account will be suspended

Automated Email Notice

Notification that their account will be suspended

Calls the customer again and suspends their account

Account Manager Response

Calls the customer again and suspends their account

91+ days

How Long Past Due

91+ days

Notification that their account has been sent to collections

Automated Email Notice

Notification that their account has been sent to collections

Sends the account to the collections department

Account Manager Response

Sends the account to the collections department

First Column as Header

Site Content Roles

Content Strategist

Content Strategist

  • Writes content using plain language and search optimization techniques
  • Develops content style guides
  • Plans editorial calendars
  • Creates a sustainable governance model
  • Writes content using plain language and search optimization techniques
  • Develops content style guides
  • Plans editorial calendars
  • Creates a sustainable governance model

Designer

Designer

  • Creates page layouts with clear visual hierarchies to support the content needs
  • Strategically uses images, color, and cards to emphasize or highlight key messages
  • Creates page layouts with clear visual hierarchies to support the content needs
  • Strategically uses images, color, and cards to emphasize or highlight key messages

Information Architect

Information Architect

  • Creates organizational structures that are based on relationships between pieces of content and that facilitate the finding of information
  • Designs the navigation system
  • Produces the sitemap
  • Defines naming conventions for files and folders
  • Creates organizational structures that are based on relationships between pieces of content and that facilitate the finding of information
  • Designs the navigation system
  • Produces the sitemap
  • Defines naming conventions for files and folders

Subject Matter Expert

Subject Matter Expert

  • Provides expertise related to the topics
  • Contributes content
  • Verifies final product presents factual information
  • Provides expertise related to the topics
  • Contributes content
  • Verifies final product presents factual information

User Researcher

User Researcher

  • Implements various research methods to gain understanding of user needs and behaviors
  • Conducts the research studies, analyzes and reports the results, and makes recommendations for improvement
  • Implements various research methods to gain understanding of user needs and behaviors
  • Conducts the research studies, analyzes and reports the results, and makes recommendations for improvement

No Row or Column Headers

Urgent versus Important Matrix

Urgent and Important

Crises, pressing problems, projects with close deadlines

Important and Not Urgent

Planning, goal setting, relationship building, new opportunities

Urgent and Not Important

Interruptions, some emails and calls, some meetings

Not Important or Urgent

Distractions, busy work, time wasters