Working Smart with Tables
When you've got the hang of working with tables, it's time to make them work for you. You want them to look nice, keep their shape, and use efficient formatting. You want them to be accessible. And you can do all of that in Dreamweaver!
Controlling Table Dimensions
Absolutely the hardest thing about designing with HTML tables is making sure they keep their dimensions in the various browsers. They stretch. They shrink. They come apart at the seams. What can you do to avoid these dimensional disasters?
Don't Use Dimensions Unless You Have To
Remember, tables don't need to have dimensions at all. Tables without dimensions tend to shrink around their contents, sizing themselves automatically. Sometimes this is all that you need. And sometimes you need only a few strategically placed dimensions.
Try it! Select a data or layout table that has been causing you fits, and click the Clear Column Widths and Clear Row Heights buttons in the Property Inspector to remove all dimensions (see Figure 8.11). How does it look? If the table contains short bits of text that are wrapping when they shouldn't, try selecting each cell where that's a problem and turning on the No Wrap option in the Property Inspector. Your dimensional problems may be over.
If your table needs dimensions, start by setting only a few. Maybe setting a width for the overall table will be enough, and the cell widths will take care of themselves. If your table columns are still funky, assign cell widths. You don't need to give every single cell a widthjust one in each column.
When you've got dimensions in place, make sure they don't contradict each other. One of the primary causes of table misbehavior in browsers is conflicting dimensions. If you set each column of your table to have a width, either remove the table's overall width or make sure the numbers add up. (The table's overall width must include the widths of all columns as well as cellspacing, cellpadding, and non-CSS borders.) If your columns are percent-based, the total percent must add up to 100%. If the table width is percent-based, don't assign pixel widths to all columns. And so on. The more you work with dimensions, the more important it is to do the math. Dreamweaver won't create mathematical impossibilities in the code it writes for you, but the program won't stop you from doing it yourself.
Finally, even though Dreamweaver gives you opportunities to set heights for your tables and cells, remember that this attribute is not part of the HTML specification and, more to the point for your designs, doesn't always play nicely in browser displays. Assign widths as you like, but let your content determine height. If you really do need to assign a height, make sure you test it thoroughly in all target browsers.
Use Control Rows and Columns When Necessary
Have you ever wondered why sliced image tables generated by programs such as Fireworks generally don't fall apart in the browser? They're coded with control rows and columns. An old designer's trick for creating stable tables takes advantage of this fact by building tables around invisible "spacer" graphics that prop open the table to exactly the right size. A control row is an extra row added to the top or bottom of a table, built with no merged cells and containing an invisible single-pixel GIF in each cell set to the width desired for that column. A control column is an extra column added to the left or right of a table, built with no merged cells and containing a single-pixel GIF in each cell set to the height desired for that row.
You don't necessarily need both. If your table's height is stable and only the width needs help, you need only a control row. If you want to stabilize width and height, add the column as well.
Figure 8.15 shows a control row and column in action. Adding one or both of these items to your tables, and managing them, can be a chorebut they're worth their weight in gold for table stability.
Figure 8.15 A table (as it looks in Expanded Tables mode) showing a control row and column.
To create a control row, you first need the spacer graphic to put in its cells. You can easily build one in Fireworks or any other web graphics program by creating a new image with a 1 x 1 pixel canvas and saving or exporting it as a transparent GIF. Every time you export a sliced image table from Fireworks, it generates a spacer image (spacer.gif). Dreamweaver generates a spacer image when you build a flexible table in Layout mode (spacer.gif) or when you convert Layers to Tables (transparent.gif).