Why You Should Avoid Using Nested Tables

Nested Tables Slow Your Web Pages Down

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 very important.

What is a Nested Table?

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

For example:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>
      <table>
        <tr>
          <td>nested table column 1</td>
          <td>nested table column 2</td>
        </tr>
      </table>

    </td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</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 (within reason). But the moment 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 have nested inside one another, the slower the page will load.

When you create a page with tables, keep in mind that the more tables that are within tables, the slower the page will load. 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.

Tables for Layout

You should not be using tables for layout in your Web pages. They almost always require that you use nested tables, so a table-layout Web page will load more slowly than the same design rendered in CSS.

Also, if you’re trying to write valid XHTML, tables should not be used for layout at all. Tables are for tabular data (such as spreadsheets), not for layout. 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:

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</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).

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
</table>
<table style="width:100%;">
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>

Converting Nested Tables Into One Table

You may feel that all this is good information, but you have a table that must have another table nested in it.

While this may be true, often you can convert nested tables into slightly more complex single tables by using the and attributes on your table cells. For example, in the nested table at the top, I can convert this into a single table with just the colspan attribute:

<table>
  <tr>
    <th>Column 1</th>
    <th colspan="2">Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>nested table column 1</td>
    <td>nested table column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td colspan="2">Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

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