Why You Should Avoid Using Nested Tables

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, especially on mobile connections that might be limited to 2G or 3G data rates.

What Is a Nested Table?

A nested table is an HTML table that has another table inside it. For example:

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. 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 several rows, it can often load more quickly if you write each row as a separate table.

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.