Well yes you can set widths on the columns if you want to make the table harder to read. Generally if you let the table set the widths itself based on the width of the content it will make the table far more user friendly.
Originally Posted by Rowsdower!
It all depends on how you are trying to use CSS - to make the page appear exactly the way you want it to look regardless of how unfriendly that makes it for your visitors - or to make the page as easy to use for as many of your visitors as possible.
In most cases where you do set widths on table columns and the table is actually readable the columns will be very close to the widths they would have been if you didn't bother to set widths. So you can speed up the loading of your page very slightly by discarding the widths or save yourself a few seconds of typing by not bothering to enter them in the first place. At the very least you should test the table with a range of typical data to see how it looks at a selection o0f different resolutions before deciding that you have one of the rare cases where the browser gets it wrong in setting appropriate column widths.
In those cases where you do need to set column widths you should do so by attaching a class that specifies the required width to the appropriate <col> tag in the table - you wouldn't attach the width to a <td> tag as the one column may also contain <th> tags and there will definitely be more than one column that uses <td> tags.
Here's an example table showing how to set column widths where you decide that doing so is appropriate (note that the style attributes ought to be replaced by classes that have those CSS properties attached but I have included them here to make it easier to see how they are applied). The example applies a width to the third of the four columns in the table because we have decided that the browser makes that column too wide because of content in a cell where there is actually space to wrap the content onto a new line.
<table summary="example table">
<col style="background:#fcc;" />
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
<th scope="row">Row 1</th>
<td>row 1, Col 1</td>
<td colspan="2">row 1, Col 2 and 3</td>
<th scope="row">Row 2</th>
<td>row 2, Col 1</td>
<td rowspan="2">row 2 and 3, Col 2</td>
<td>row 2, Col 3</td>
<th scope="row">Row 3</th>
<td>row 3, Col 1</td>
<td>row 3, Col 3</td>