February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

Build a Bulletproof Table

Special thanks to John Govsky for this tutorial.

How to Build a Bulletproof* Table Using Transparent Pixel Shims

*Note that nothing is truly "bulletproof" when it comes to Web browsers and HTML.

This example demonstrates the technique commonly used to force Web browsers to consistently render HTML tables. This trick, or "kludge," keeps tables from collapsing, regardless of the contents of the table. Here we will use pixel shims to fix the width of the table data cells, and thus of the whole table.

You will need a transparent pixel GIF. If you don't already have an invisible GIF, you can grab one from:
cleardot.gif

Step 1 - With paper and pencil, sketch out a mock-up of the page layout.

table layout sketch

Step 2 - Add a row at the very top of the table sketch.

When all is said and done, this row will be only one pixel tall, and will be invisible.

table layout sketch

Step 3 - Define the columns.

Use vertical lines to define all possible columns, even if a line cuts through a row (as these lines cut through the row containing the headline).

table layout sketch

Step 4 - Define the rows.

Use horizontal lines to define all possible rows, even if a line cuts through a column (as a line cuts through the text block on the left).

table layout sketch

Step 5 - Define the column widths.

First decide how wide the entire table is to be. (In this example we will set the table width at 600 pixels, a size that fits within most monitors.) Then decide on all column widths, which of course when added up must equal the table width, exactly. Remember that each column must be at least as wide as any images that will be placed into a cell in that column.

table layout sketch

Step 6 - Refine the table structure.

Note that each column in the top row will become a cell containing an invisible pixel. Now erase the lines that cut through, or span, a cell.

table layout sketch

Step 7 - Code the table.

Now we can clearly see the underlying table structure.

table layout sketch

Note that this table is four rows by three columns, and that the first row, reserved for the invisible pixels, will become only one pixel tall. Also note that the table data cells in this top row will not contain any rowspan or colspan attributes.

The width of the table data cells is set by using the width attribute of the invisible pixel <img> tags, not by using the width attribute of the <td> tags. The border, cellspacing, and cellpadding attributes of the <table> must be set to zero.

Here is the code for the above table:

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

      <tr> 

      <td><img src="cleardot.gif" 
      width="175" height="1" alt=""></td>

      <td><img src="cleardot.gif" 
      width="300" height="1" alt=""></td>

      <td><img src="cleardot.gif" 
      width="125" height="1" alt=""></td>

      </tr>

      <tr> 

      <td colspan="3">CONTENT</td>

      </tr>

      <tr> 

      <td rowspan="2">CONTENT</td>

      <td rowspan="2">CONTENT</td>

      <td>CONTENT</td>

      </tr>

      <tr> 

      <td>CONTENT</td>

      </tr>

      </table>

Note that in this example the width of the table is fixed, not its height. You are usually much more concerned with the width than the height. To fix the height instead of the width, you can use this technique, but with an added column for pixel shims (with a width equal to one pixel) instead of an added row. If you wish to fix both the table's width and height you will need to be very careful to allow enough room for text in the cells to get larger without breaking the table structure.

Also note that for invisible pixels used as spacers or shims, the empty alt value (nothing between the quotes, as in <img alt="" src="cleardot.gif"> ) is used.