Module 5: Tables · Lesson 4 of 5
Why Not Use Tables for Layout in HTML? Fix Example
All lessons in Module 5
- Table Basics
- Headers and Captions
- Spanning Cells
- Tables Are Not Layout
- Project: Class Timetable
Goal: Rebuild a layout table as semantic page regions.
Learn
Before CSS grew up, people built entire page layouts out of tables, with the logo in one cell, the menu in another and the content in a third. (The later move away from this got a name: tableless web design (opens in a new tab).) Old sites and email templates still do it. On a modern web page it counts as a bug.
- Screen readers announce a table, so users hear "row 2, column 1" where they should hear a menu and an article.
- A layout table has no landmarks, so nobody can jump to the content.
- Rows and columns are rigid. The page cannot rearrange itself on a narrow phone.
So use <table> only when the content really is data in rows and columns. Page structure gets <header>, <nav>, <main> and <footer>, and CSS does the positioning. You already built that structure in Header, Nav, Main, Footer.
The short version
- A
<table>is for data that really has rows and columns. - Layout tables confuse screen readers, offer no landmarks and cannot reflow on narrow screens.
- Build page structure with
<header>,<nav>,<main>and<footer>, then position it with CSS. - Don't swing too far the other way. Real tabular data still goes in a table, and a pile of divs is no substitute.
Example
<!-- Data: a table is right -->
<table>
<tr>
<th>Size</th>
<th>Price</th>
</tr>
<tr>
<td>Small</td>
<td>$3</td>
</tr>
</table>
<!-- Page structure: use semantic tags -->
<header>
<h1>Juice Bar</h1>
</header>Your task
Sunny Side Cafe's homepage is a layout table straight out of 2003. Rebuild it with no table at all:
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<table>
<tr>
<td><a href="#menu">Menu</a></td>
<td><a href="#hours">Hours</a></td>
<td><a href="#find-us">Find us</a></td>
</tr>
</table>Right
<nav>
<a href="#menu">Menu</a>
<a href="#hours">Hours</a>
<a href="#find-us">Find us</a>
</nav>A row of links is navigation, so nav marks it as a menu and CSS can line the links up side by side.
Wrong
<div class="row">
<div>Small</div>
<div>$3</div>
</div>
<div class="row">
<div>Large</div>
<div>$5</div>
</div>Right
<table>
<tr>
<th>Size</th>
<th>Price</th>
</tr>
<tr>
<td>Small</td>
<td>$3</td>
</tr>
<tr>
<td>Large</td>
<td>$5</td>
</tr>
</table>A price list is genuine row-and-column data, and a fake grid of divs throws away the headers screen readers would announce.
Go deeper
Table layouts ruled the web in the late 1990s and early 2000s, because early CSS could not build columns reliably. Designers nested tables several levels deep and propped them open with invisible spacer images. Yes, really. Modern CSS layout tools such as flexbox and grid, supported by every current browser (opens in a new tab), do the job far better. They can show the same HTML as one column on a phone and three on a desktop.
The HTML Living Standard (opens in a new tab) says it plainly: tables must not be used as layout aids. Attributes from that era, such as width, align, bgcolor and cellpadding, are obsolete. Modern code puts all of that styling in CSS.
To rebuild an old layout table, go step by step. Name each cell by its job (header, menu, content, footer). Write the matching semantic tags in reading order. Only then think about looks. A converter such as DivTable (opens in a new tab) can turn the table into divs as a starting point, and you rename those to semantic tags. Keep the source order the same as the order a person reads the page in.
Stuck with a layout table, for example in an email? Mark it with role="presentation" and keep <th> and <caption> out of it.
Frequently asked questions
Why should you not use tables for layout in HTML?
Because a table tells browsers and assistive technology that its content is data. Used for layout, it makes screen readers read out rows and columns where there should be menus and articles. It also hides the page's landmarks and locks content into a rigid grid that phones cannot rearrange. CSS layout produces the same look and leaves the HTML meaningful and flexible.
Are tables still used for layout in HTML emails?
Yes. Many email programs support only a slice of modern CSS, so email templates still place content with tables. If you build one, put role="presentation" on each layout table. Screen readers then ignore the table structure and read the content normally (ARIA Basics explains roles). Web pages are a different story: use semantic tags and CSS there.
Is it bad to use tables in HTML?
No. For tabular data a table is the correct tool: timetables, price lists, sports scores, comparisons, spreadsheets. Trouble starts when tables are used to position page parts like a logo, a menu and a sidebar. A quick test is to imagine the content with column headers on top. If that makes sense, use a table.