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

Description

When to Use

Icon

medical icon

Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When to Use

  • Lorem ipsum.
  • Dolor sit amet.

Icon

medical icon

Description

Lorem ipsum dolor sit amet.

When to Use

  • Lorem ipsum.
  • Dolore magna.

Icon

mask icon

Description

Sed do eiusmod incididunt ut labore et dolore magna aliqua.

When to Use

  • Lorem ipsum dolor sit amet.

 

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

Automated Email Notice

Account Manager Response

How Long Past Due

31-60 days

Automated Email Notice

Reminder to pay within 10 days

Account Manager Response

Calls the customer to discuss the situation

How Long Past Due

61-90 days

Automated Email Notice

Notification that their account will be suspended

Account Manager Response

Calls the customer again and suspends their account

How Long Past Due

91+ days

Automated Email Notice

Notification that their account has been sent to collections

Account Manager Response

Sends the account to the collections department

First Column as Header

Site Content Roles

Content Strategist

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

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

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

Subject Matter Expert

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

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

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

  • photo icon

    Go to ExamplesSee examples on this page that illustrate key options.

  • tools icon

    Building in the WCMSSee guidelines for building table-style modules in the WCMS.

  • tools solid icon

    Data TableFind out how to use the WCMS table tool to create standard data  tables with appropriate HTML tagging.

  • photo icon

    TP4 UX Best Practices ppt icon[PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.

Page last reviewed: August 12, 2019
Content source: WCMS / Template Team