Tables

How to use Tables

Tables should be used to present tabular data, such as financial data, schedules, and statistics, rather than 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:

1. 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.

2. Provide captions and summaries: Use the <caption> tag to provide a brief summary of 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 to understand the content and context of the table, especially for users who are visually impaired or have cognitive disabilities.

3. 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 to understand the relationship between the data in the table and the headers that describe it.

4. Avoid using merged cells: Avoid using merged cells, as they can make it difficult for users to understand the content and structure of the table. If you need to merge cells, use the appropriate attributes, such as rowspan and colspan, to indicate how the cells are related to each other.

5. Ensure that tables are responsive: Ensure that the tables are responsive and can adapt to different screen sizes, so that users can access the content on different devices. You can use CSS styles to make the tables more responsive, such as setting the table width to 100% or using media queries to adjust the table layout for different screen sizes.

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 layout because they are primarily designed for presenting tabular data, not for layout purposes. Using tables for layout can create accessibility issues for people who use assistive technologies, such as screen readers, because it can make it difficult for them to understand the structure and meaning of the content.

Here are some reasons why tables should not be used for content layout:

1. 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.

2. Complexity: Tables can be complex, with nested tables, merged cells, and other advanced features that can make them difficult to navigate with a screen reader. This can create a poor user experience for people with disabilities, who may struggle to understand the content and navigate through it.

3. 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.

4. 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.

In summary, it is important to use appropriate HTML tags and CSS styles to create layouts, instead of relying on tables for layout purposes. This will help ensure that your content is accessible to everyone, including people with disabilities who use assistive technologies to access the web.

Implementing Good Table Practices 

Table Caption

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

<table>

<caption>Title of Table</caption>

Headers

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

The code looks as follows for the first row in the table:

Table Column Headers

<thead>

<tr>

  <th>Make</th>

  <th>Model</th>

  <th>MegaPixals</th>

  <th>Price</th>

</tr>

</thead>

Cascade webpage table example with caption and headings.

Entire source code of table above

<table><caption>Schedule of presenters, March 2 from 5&#8211;9 p.m. in Colusa Hall</caption>
<thead>
<tr>
<th>Time</th>
<th>Presenter</th>
<th>Paper Title</th>
<th>Faculty Mentor</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>5:30-5:45</p>
</td>
<td>
<p>Rodney Thomson, History (Grad)</p>
</td>
<td>
<p>"The Movement at Chico State College: 1964-1976"</p>
</td>
<td>
<p>Dr. Jeff Livingston</p>
</td>
</tr>
<tr>
<td>
<p>5:50-6:05</p>
</td>
<td>
<p>Martha Diaz, Anthropology (Grad)</p>
</td>
<td>
<p>"Santa Clara Valley Medical Center: Unearthing Ancestral Remains"</p>
</td>
<td>
<p>Dr. Colleen Milligan</p>
</td>
</tr>
<tr>
<td>
<p>6:10-6:25</p>
</td>
<td>
<p>Lucas M Alward, Political Science (Grad)</p>
</td>
<td>
<p>&#8220;Vets Behind Bars: An Empirical Analysis of Veteran Status in a County-Jail Setting&#8221;</p>
</td>
<td>
<p>Dr. Jonathan Caudill</p>
</td>
</tr>
<tr>
<td>
<p>6:30-6:45</p>
</td>
<td>
<p>Allison March, International Cognitive Visualization (Grad)</p>
</td>
<td>
<p>&#8220;Media Effecting Awareness of a Social Issue&#8221;</p>
</td>
<td>
<p>Dr. Neil H. Schwartz</p>
</td>
</tr>
<tr>
<td>
<p>6:50-7:05</p>
</td>
<td>
<p>Jaydeep Bhatia, Political Science (Grad)</p>
</td>
<td>
<p>&#8220;The Liberal Advantage: Examining the Relationship between Ideology and human development&#8221;</p>
</td>
<td>
<p>Dr. Lori Weber</p>
</td>
</tr>
<tr>
<td>
<p>7:15-7:30</p>
</td>
<td>
<p>Anna N Bartel, Psychological Science (Grad)</p>
</td>
<td>
<p>&#8220;Impact of Appearance-based Trait Inferences of Political Candidates on Comprehension of Contradictory Texts&#8221;</p>
</td>
<td>
<p>Dr. Neil Schwartz</p>
</td>
</tr>
<tr>
<td>
<p>7:35-7:50</p>
</td>
<td>
<p>Georgia Anderson-Nilsson, Political Science (Grad)</p>
</td>
<td>
<p>&#8220;The Institutional Determinants of Rural Poverty: A Cross-National Examination of Latin America&#8221;</p>
</td>
<td>
<p>Jennifer Wilking</p>
</td>
</tr>
<tr>
<td>
<p>7:55-8:10</p>
</td>
<td>
<p>James Proffer, Political Science (Grad)</p>
</td>
<td>
<p>&#8220;Nation-Building and Religion: Exporting Divisiveness&#8221;</p>
</td>
<td>
<p>Dr. Adam Irish</p>
</td>
</tr>
</tbody>
</table>

Video on how to add captions to tables in Cascade