File Under: HTML

Keep Tables Tidy

As we all know, tables are wondrous for controlling overall page layout. Without them, our designs would be … well … prehistoric.

But using tables comes at a price. They generate a ridiculous amount of HTML code:tr, td, align, cellpadding, and on and on. Fortunately, there are ways to beat the system and minimize table code.


Contents

  1. Do You Really Need Them?
  2. Tidy Table Carpentry 101
  3. Avoid Nested Tables
  4. Simplify, Simplify, Simplify
  5. Filling Cells
  6. Abdomenize Those Attributes

Do You Really Need Them?

The first trick:Don’t use tables unless they’re absolutely necessary. I know that sounds obvious, but there are many sites that don’t follow this simple rule of thumb. For example, if all you want to do is left-align an image and a caption on a page, there’s no need to use a table at all. Also, just because some elements on a page are layed out using a table doesn’t mean the whole page needs to be. Take a look at the following fake page:

table1.gif

(The gray lines represent text, and the colored rectangles are images.)

To create this page, you’d have to use an HTML table – at least for the columns of text. But you wouldn’t need to put all the page elements within table cells. Shown below is the same page with table cells in red:

table2.gif

Note that the blue banner graphic at the top of the page doesn’t need to be in the table, nor do the text line and yellow graphic at the bottom.

Now let’s move on to liposuctioning all those extra table cells.

Tidy Table Carpentry 101

When you do have to use a table, keep the number of rows, columns, and cells to a minimum. The fewer there are, the less code there is. Let’s look at another example page:

table3.gif

Ooh, complicated. Here’s how someone might create a table to contain everything on this page after a bit too much to drink:

table4.gif

Ouch! By creating a cell for every single piece and not exercising restraint, we end up with a table that is ridiculously overcomplicated. Here’s another option:

table5.gif

Ahhh. Much simpler, much less code, and it accomplishes the same thing. A few notes:

  • For vertical space between elements, there’s no need to create a new row for that invisible spacer GIF. Put the extra vertical space right below the element, in the same cell.
  • If you want to right-align an image within a column of text (like the green rectangle), consider using align=right on the <img> tag, instead of creating a new table cell for the image.
  • Even if the image doesn’t exactly line up with the edge of another cell (like the yellow circle), you can use the hspace attribute to scoot it over, instead of resorting to adding more cells.
  • Use colspan and rowspan! They are essential for reducing the number of cells. By using rowspan on the narrow (empty) column to the right of the leftmost paragraph of text, I can reduce eight table cells to one.

Avoid Nested Tables

Here’s another little trick that goes a long way to reducing code:Don’t put a table within a table unless you absolutely have to. This is because more tables mean more code, and also because the browser takes longer to draw the page when there are nested tables. Again, this is best illustrated using a mocked-up example page:

table6.gif

One way of creating this layout is by using three different tables (thick red lines):

table7.gif

One table contains the entire page, a second table within the first table contains all three main columns of text, and a third table within the second table contains the smaller three columns of text at the bottom. The result is a lot of code and a slower page. Instead, this same layout can be achieved by using one table:

table8.gif

Here, colspan and rowspan are used to avoid additional nested tables. Less code, faster page.

Simplify, Simplify, Simplify

Part of what makes HTML tables so magical is that you can color the backgrounds of individual cells with solid colors, and thus do some fairly nifty interface design without ever using an image. You could even create something as complex as the “floating palette” element below without ever using a GIF:

table10.gif

But why? As a feat of HTML authoring, it would be quite an accomplishment, but considering the number of table cells it would take, you’re talking about a lot of code. In these situations, look for ways to replace complex tables with an image. In this example, the entire bottom of the floating palette (below the text) could be a GIF. The savings in table code would probably outweigh the additional file size of the GIF.

Filling Cells

Expert table-makers will tell you that unless you put something within a table cell, it can sometimes collapse or not display. For example, the following code creates a table with three cells:yellow, light gray, and orange:

<table border="1" cellpadding="0" cellspacing="0">

<tr>

<td width="50" bgcolor="yellow"></td>

<td width="200" bgcolor="lightgrey">Behold the power of cheese.</td>



<td width="50" bgcolor="orange"></td>

</tr>

</table>

Here is the result:

Behold the power of cheese.

The middle cell appears, but the yellow and orange backgrounds don’t appear because the first and third cells are empty. To make the cells show up, you’ll need to put something in them. Many people insert invisible spacer GIFs of the appropriate width (in our case, 50 pixels), but that’s not necessary since the column widths are already specified as 50. All we really need is a simple nonbreaking space character entity: .

<table border="1" cellpadding="0" cellspacing="0">

<tr>

<td width="50" bgcolor="yellow"> </td>

<td width="200" bgcolor="lightgrey">Behold the power of cheese.</td>

<td width="50" bgcolor="orange"> </td>

</tr>



</table>

Now all the cells are visible:

Behold the power of cheese.

All you need within empty cells is a  . A spacer Gif isn’t necessary and results in too much code.

Abdomenize Those Attributes

A coding rule of thumb, “Don’t use unnecessary attributes,” applies to tables as well. Take a look at the following code and see how many unnecessary attributes you can find:

<table width="300" border="0" cellspacing="0" cellpadding="0">

<tr align="left" valign="top">

<td width="200" align="left" valign="top">row 1, column 1</td>

<td width="100" align="left" valign="top" bgcolor="lightgrey">row 1, column 2</td>

</tr>

<tr align="left" valign="top">



<td width="200" align="left" valign="top" bgcolor="yellow">row 2, column 1



<table width="200" align="left" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="yellow">

<tr>

<td width="50" align="left" valign="top" bgcolor="yellow">cell a</td>

<td width="150" align="left" valign="top" bgcolor="yellow">cell b</td>

</tr>

</table>



</td>

<td width="100" align="left" valign="top">row 2, column 2</td>

</tr>

</table>

Here’s the result of the code:

row 1, column 1 row 1, column 2

row 2, column 1

cell a cell b
row 2, column 2

What code is extraneous? Lots. Here’s what can be removed:

  • width="300" isn’t needed because the two columns within this table are defined as 200 and 100 pixels wide, which obviously add up to 300. Defining the <td> widths makes stating the overall table width unnecessary.
  • Various occurrences of align="left" valign="top" aren’t necessary because cell content alignment is already specified in the <tr>s, and those alignments carry down to the <td>s within those <tr>s.
  • In the second row, the <td>‘s width="200" and width="100" aren’t needed because the widths were already specified in the first row. By definition, the first column of the second row must be the same width as the first column of the first row, so there’s no need to use width again.
  • Three instances of bgcolor="yellow" can go away because the entire contents of the nested table inherit the background color of the cell that contains that table.

So the final, cleaned-up code looks like what you see below. It does exactly the same thing, but saves 239 bytes in file size.

<table border="0" cellspacing="0" cellpadding="0">

<tr align="left" valign="top">

<td width="200">row 1, column 1</td>

<td width="100" bgcolor="lightgrey">row 1, column 2</td>

</tr>



<tr align="left" valign="top">

<td bgcolor="yellow">row 2, column 1



<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50">cell a</td>

<td width="150">cell b</td>

</tr>



</table>



</td>

<td>row 2, column 2</td>

</tr>

</table>

Now your code is looking pretty toned!

Well, that about wraps it up. A lot of tricks, some obvious, others less so. The idea is to get us all thinking more about how we code so we can save a few bytes here and there, until all those bytes add up to a better experience for the users of our sites.

This list of tricks is certainly not complete. If you have your own tips for trimming down your HTML, add them to this wiki article.


Faster HTML for everybody!