Tables

Cascade 3.0 | Cascade 4.0

Requirements of Adding a Table

Tables should be used to present tabular data, such as financial data, schedules, and statistics NOT for layout purposes. When using tables, it is important to ensure that they are accessible to all users, including those who use assistive technologies to access the web. Here are some guidelines to follow when using tables on a webpage:

• Use semantic markup
  Use the appropriate HTML tags, such as <table>, <thead>, <tbody>, <th>, and <td>, to create a semantic structure that accurately reflects the content of the table. This will help assistive technologies, such as screen readers, to correctly interpret and present the data to users.
• Provide captions and summaries
  Use the <caption> tag to briefly summarize the table's content, and the <summary> attribute to provide a more detailed description of the table's purpose and structure. This will help users understand the content and context of the table, especially for users who are visually impaired or have cognitive disabilities.
• Use appropriate table headers
  Use the <th> tag to define table headers for each row and column, and use the scope attribute to indicate whether the header applies to a row or column. This will help users understand the relationship between the data in the table and the headers that describe it.
• Avoid using merged cells
  Merged cells can make it difficult for users to understand the content and structure of the table.

By following these guidelines, you can create accessible tables that are easy to understand and use, and provide a better user experience for all users.

Tables Should Not Be Used As Content Layout

Tables should not be used as content layouts to avoid accessibility errors and a poor user experience. Here are some reasons why tables should not be used for content layout:

• Semantic structure
  Tables are intended to display data in a structured way, with columns and rows that have a specific semantic meaning. Using tables for layout purposes can confuse screen readers, which rely on the semantic structure of the content to provide context to users.
• Screen reader issues
  Some screen readers may have difficulty reading tables when they are used for layout purposes. For example, they may read the content in a table cell in a different order than it appears on the page, or skip over certain cells altogether.
• Responsive design
  Tables are not well-suited for responsive design, which is essential for creating accessible websites that work well on different devices and screen sizes. When tables are used for layout, they can become distorted or difficult to read on smaller screens, making it harder for users to access the content.

Implementing Good Table Practices 

Table Caption

Every table should have a caption tag that states the table's title.

<table>

<caption>Title of Table</caption>

Watch a video on how to add captions to tables.

Headers

If you use a table that has logical headers, the header row or column should use the <th> tag instead of the <td> tag.

Example of a Correct Table Structure in the Source Code

HTML Structure of the Table

The following HTML code demonstrates the correct tag structure of the example table. Your source code should include this formatting every time you add a table to the page.

<table>
<caption>Comparison of Professional Cameras</caption>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>MegaPixals</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canon</td>
<td>EOS300D</td>
<td>5.3</td>
<td>$899</td>
</tr>
<tr>
<td>Nikon</td>
<td>D70</td>
<td>6.3</td>
<td>$899</td>
</tr>
</tbody>
</table>

Adding a Table in Cascade 4.0

Content Contributors cannot access the source code within Cascade 4.0 and, therefore, cannot add the <th> and <caption> tags to the HTML structure. These tags ensure your table is compliant with accessibility standards. If you want to add a table to your page, please add the table structure in the WYSIWYG component and submit your changes. Web Services will overlook your additions and add in the correct tag format.