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:
Ooh, complicated. Here's how someone might create a table to contain everything on this page after a bit too much to drink:
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:
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:
One way of creating this layout is by using three different tables (thick red lines):
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:
Here, COLSPAN and ROWSPAN are used to avoid additional nested tables. Less code, faster page.
next page»
