HTML Table column width practices

Question

What are good practices when selecting column widths in a table? Let's say I have four columns, name (variable width), description (long content of text), count (max 3 chars), date (fixed format).

What would be a good practice? I'm thinking fixed width for descr., count and width (thus actually also making name "fixed" width). But my real question is, how to select a particular width size. For instance, if the date format is yyyy-MM-dd is there some trick to convert those 10 chars to a width which will guarantee that it shows ok in any browser using any font and font-size (without also taking up any excessive space)?

edit: With fixed I mean something akin to "fixed amount of pixels relative to font width"

Answer 1

You can declare white-space: nowrap; on all the cells that you want to stretch as much as they need without using extra space (name, date, count), and then simply give your remaining cell a width of 100%. This way the 100% wide cell will expand as much as possible, without causing the other cells to collapse on multiple lines.

Answer 2

If you want to save yourself lots of markup...

First, if by fixed width you mean a fixed percentage, add the following to your stylesheet:

.width1 {
    width: 1%;
}
.width2 {
    width: 2%;
}
.width99 {
    width: 99%;
}
.width100 {
    width: 100%;
}

This gives you the flexibility you need if you decide to apply an odd percentage width for any of them if you wish - for example width23 on one of them, width 27 on another.

Now this is the clever bit. Using the col tag, you can apply widths just once instead of on every cell. I know you can apply widths to just the first row, and they will set the widths for the same cell in every other row - but the col tag can be used for setting other properties too. For example:

<table class="width100">
    <col class="width15" style="background-color: #cccccc;" />
    <col class="width65" />
    <col class="width10" />
    <col class="width10" />
    <tr>
        <td>My Sample Name</td>
        <td>My Sample Long Description</td>
        <td>5</td>
        <td>2010-Oct-08</td>
    </tr>
</table>

I generally prefer to use this technique - but if it is a layout I will be using on multiple tables (for example the customers table may be the same layout as the agents table) then I will create a class for each column and set the width etc in that class. I will then apply the relevant class to each cell. I suppose both methods could be combined - the relevant class could be applied to the relevant col, but the fact that the properties are set in one place (the stylesheet) means that you only have to change it in once place.

Hope this helps and that it is what you are looking for.

Richard