[an error occurred while processing this directive]
Go to Bottom Nav - October 19, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

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.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu