Why You Should Avoid Using Nested Tables

They slow down your web pages

school website Illustration

 filo/Getty Images

Web pages need to download fast, but nested tables can slow down the process. Don’t let anyone tell you that more people use broadband or high-speed internet, so you don’t have to worry about how fast your pages load. With the amount of content on the web, a page or site that loads slowly is going to have fewer visitors than one that loads quickly. Speed is important.

What Is a Nested Table?

A nested table is an HTML table that has another table inside it. For example, the following code:

yields a simple table that looks like this:

Browser showing the sample code in the preceding example of a nested table.

Nested Tables Cause Pages to Download More Slowly

A single table on a web page will not cause the page to download more slowly. But when you put one table within another table, it gets more complicated for the browser to render, so the page loads more slowly. And the more tables you nest, the slower the page loads.

Normally, when a page loads, the browser starts at the top of the HTML and loads it sequentially down the page. However, with nested tables, it has to find the end of the table before it can display the entire thing. The reason the rendering slows is that the browser must iterate the HTML document additional times.

Tables for Layout

When you write valid XHTML, tables should not be used for layout at all. Tables are for tabular data such as spreadsheets, not for page design. Instead, you should use CSS for layout — CSS designs render more quickly and help you maintain valid XHTML.

Designing Faster-Loading Tables

If you design a table with multiple rows, it can often load more quickly if you write each row as a separate table. For example, you could write a table like this:

But if you wrote the same table as two tables, it would appear to load more quickly, because the browser would render the first and then render the second, rather than rendering the entire table all at once. The trick is to make sure that each table has identical widths and other styles (like padding, margins, and borders).

Converting Nested Tables Into One Table

Convert nested tables into slightly more complex single tables by being clever about attributes like colspan, which if deployed carefully will simulate the appearance of a nested table without actually performing like one:

This table also has the benefit of using fewer characters than the nested table, so it will download more quickly, as well.