• 
• 
• 

Build Your Own Web Gallery

A step-by-step guide with screenshots for building your first website

This Article Features Photo Zoom

STEP 5e: Adjusting The Table


We have our five columns, but right now they're all set to equal widths. Our design calls for columns 33 pixels wide at each side of the page, and three center columns, each 278 pixels wide for the photos. We can leave the column widths unspecified, but our design may not render properly, so we want to set the column widths.

Typically, you'll do this in the cells of the first row. Once you specify column widths in one row of a table, all rows are forced to these widths. If you try to specify different widths for cells in the same column, your page will have problems.

On line 11 of the code, we add the attribute width="33px" inside the <td> tag. Our left-most column is now 33 pixels wide. On lines 12-15, we add the widths for the remaining rows. Notice in the design view at the bottom of the screen shot that our table columns reflect the change in widths.

One note of great importance: Your column widths, if you specify them as we have, must always add up to the total width of your table-never even a pixel more-or everything can go bonkers. I have a table that's 900 pixels wide, so my column widths must add up to 900 pixels. They do.

Add Comment