Tables are for relationships between data, not columns of page decoration. For a modern page layout, semantic containers and CSS layout are clearer. Before writing the code, picture the information as a small grid. Each label should help a reader understand the value next to it.
What You Need to Know
Using tables for visual placement can create confusing row-by-row reading order and unnecessary table announcements for assistive technologies.
Read a table like a story about data. The caption says what you are looking at; row and column headers explain what the numbers or words mean.
Example: See It in Action
Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<main>
<h1>School News</h1>
<section>
<h2>Latest updates</h2>
<p>News items belong in a section.</p>
</section>
</main>
<!-- A layout table would hide the page structure. -->Let’s Understand the Example
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.
- Section groups content around a shared topic and usually has a heading.
You should see a readable heading and its related content. The heading level tells readers how the ideas fit together, not merely how large the letters look.
What Should You See?
You should see a grid describing the data table. Inspect the th and td elements to check whether the first data value has a clear label.
Read the first data row aloud together with its column labels. If you cannot explain a value without pointing to its position on screen, strengthen the headers.
Try It Yourself
- Replace a two-column layout table with main and aside elements.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Building an entire header/sidebar/footer layout as a giant data table.
- Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.
Key Takeaways
- Tables are for relationships between data, not columns of page decoration.
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- Using tables for visual placement can create confusing row-by-row reading order and unnecessary table announcements for assistive technologies.