Setting the Width

By default, a browser will automatically determine the width of your cells by looking at the elements and text they contain. It will then expand each cell to the edge of its contents or to the edge of the browser window, whichever comes first. With images, that's pretty clear cut; the edge of the image will be the edge of the cell. Text, however, is stretched out until the first line break, or until the end of the paragraph, which can be very long indeed.

Figure 16.13. This table has a 200 pixel wide image with no borders. We set the width of the table to 200 pixels to keep the text from stretching out.

Instead of relying on the browser's sometimes unusual algorithms for determining table width, you can specify the width of the table or of individual cells manually, either in pixels or as a percentage of window size. For example, when designing liquid layouts with tables, it's very common to specify a table width of 100% in order to force the table to expand to the size of the browser window, no matter what size the visitor makes it. It's also quite common to specify the width of the navigational column in pixels so that it is not affected by the ebb and flow of browser size.

Figure 16.14. You can use either the CSS, the (X)HTML or both. The CSS overrides the (X)HTML (though in this example, they're the same, so it doesn't matter.)

It's important to note that no browser will let you make a table or cell narrower than its images. It will simply stretch the cell or table as necessary to make the image fit, adjusting the rest of your table as best it can.

Figure 16.15. The CSS width property is well supported. You can feel comfortable using it instead of the width attribute in the (X)HTML.

To set the width of a cell or table:

In the td or table tag, type width="n", where n is the desired width of the cell or of the entire table, in pixels.

Or type width="n%", where n is the percentage of the browser window that the table should occupy.

To set the width with styles:

In the style sheet, type width: value where value is the desired width (for more details, see page 174).

Tips

• The CSS width property is described in detail on page 174. This page focuses on how the CSS width property interacts with the (X)HTML width attribute (which has not been deprecated).

  Figure 16.16. In this case, the table is made narrower than the image it contains.

  

• A table sized with percentages will adjust as the browser window is resized. Tables sized with pixels will not.

  Figure 16.17. The image (200px) overrides the width property and/or attribute (set to 100px) and ends up looking just like Figure 16.5 on page 229. You can't make a table or cell too small for its images!

  

• Sometimes table cells with a specified width that contain only text will collapse to narrower widths in very small browser windows. An old-fashioned technique for keeping a cell open to a certain width is to put a transparent pixel spacer inside it and then set the width of the pixel spacer.

  Figure 16.18. In this case, the table is made wider than the image it contains.

  

• You can't make the table too small for its contents; the browser will just ignore you.

  Figure 16.19. Of course, you can make a table bigger than its contents. In that case, the text (and border if any) extends to fill the space.

  

• If you make the table too wide, visitors who don't use the entire screen for their browser (or who have smaller monitors) may have to scroll to see some parts of your table. If you must use a non-flexible layout, I don't recommend making tables any wider than 600 pixels.

• The widest cell in the column determines the width of the entire column.

• You don't necessarily have to specify a width for every column.

• In IE 5.x for Windows the value of width was the sum of the content, cellspacing, cellpadding and borders. In browsers that properly follow the specifications (like IE 6 and up, Firefox, Safari, and Opera), the value of the width property (or attribute) does not include padding or borders.

• There is also a height attribute but it is non-standard, and not well supported.