If you’re nosy enough to look at my html then
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="1x1.gif" width="70" height="1" border="0"></td> <td><img src="1x1.gif" width="10" height="1" border="0"></td> <td><img src="1x1.gif" width="210" height="1" border="0"></td> <td><img src="1x1.gif" width="10" height="1" border="0"></td> </tr>
you might notice rows like this at the top of some of my tables.
This is a professional design technique designed to increase accuracy, save time, and create an in-built diagnostic tool.
Sadly, a lot of programmers and less knowledgeable html coders tend to dismiss shim rows as crap produced by Macromedia Fireworks or Adobe Image Ready. In actual fact they’re a very clever design technique. Shim rows are the only way you can be certain that a design will appear the same in every browser. Old browsers have difficulty handling colspans & rowspans and often distort widths or heights set on cells. Every browser treats table cells slightly differently.
The problems with using colspans, rowspans, and widths set on table cells is that they are incredibly cumbersome. They slow down the process of design and experimentation. Each time the designer changes a width or changes a structure, they must then adjust rowspans and pick through lines of code to add up and adjust cell widths. With this technique I can use the shim row as a “slider.” Each time I want to add an extra complexity to the table, I create a nested table with another shim row, instead of using colspans and rowspans to manipulate one table to shape to my needs. Because this results in smaller, simpler tables, each table requires only a few changes and can be altered individually without fear of the legacy structures around it distorting its shape.
Cell padding and spacing also cause big problems with nested tables. Often people make mistakes in adding or in logic that results in tables with widths and heights set too wide or narrow for the space provided: this distorts the design. Cell padding and spacing cannot be used on tables that contain sliced images without creating complex nested structures where a simple narrow column with a transparent spacer would otherwise do.
Shims are also a useful diagnostic tool. If something is pushing this table out of shape, all I need to do is select the area in the browser and I will be able to see a gap in the shim row. This will tell me which cell contains the fault. I will then be able to repair the problem quickly by finding this easy to spot row of shims and adjusting the widths of the transparent gifs.
Whereas if this row is removed or the table stripped and rewritten into the larger structure of the page it may not be instantly obvious where the problem lies. Then I will have to separate all rows out by turning them into isolated tables, turn on all the borders, open the html in Dreamweaver to check for broken tags, check all of the cell widths, try and guess what’s going on by doing stupidity checks and removing content one at a time from each cell…
Changing a design that contains colspans, rowspans, cell padding & spacing and has widths on the cells is like reverse engineering a compiled program. Yes, the file may be smaller and faster, but if you want to change it, you just end up hacking.
