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).