HTML Tables: Is there a good practice for specifying column widths? [closed]

Question

I would like to tweak a few tables in order to get the best possible presentation of my interface. Is there a good practice way to specify the widths of table columns? (e.g. If I want to display the first column as 100px wide, the second as 80px wide and the third as 60px wide.)

I took a look at HTML Table column width practices however the selected answer (while useful for the user asking the question) did not describe how this could be done.

Another answer to that question suggested using <col> to assign a class to each column and then determine the width in CSS. However, this seems inelegant and a commenter suggests issues with the <col> tag. Also, I believe it has been deprecated in HTML5?

HTML

<table>
    <col class=width100>
    <col class=width80>
    <col class=width60> 
    <tr>
        <th>Column 1</th> 
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table> 

CSS

width100 {
    width: 100px; 
}

width80 {
    width: 80px; 
}

width60 {
    width: 60px; 
}

This seems rather inelegant, and I am unsure over the reliability / deprecation of the <col> tag. Is there a better way?

Answer 1

I will split your question into two parts and answer the second part first:

Part 2: However, this seems inelegant and a commenter suggests issues with the tag. Also, I believe it has been deprecated in HTML5?

No. It has not been deprecated in HTML5. In fact, colgroup and col together are very important elements as part of the table.

e.g. have a look at this ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

...defines a column within a table and is used for defining common semantics on all common cells...

Further down it says:

CSS properties and pseudo-classes that may be specially useful to style the element: the width property to control the width of the column;...

Going by this ref: http://www.w3.org/TR/2012/WD-html-markup-20120329/col.html#col

The width attribute on the col element is obsolete. Use CSS instead

To summarize, you would be better off using colgroup and/or col to layout your tables. They help you to define common semantics on all corresponding cells. CSS is the recommended method to apply widths, which helps keep the presentation of the table separate from the markup. Using colgroup and/or col will actually save you a lot of trouble and gives you greater control on your table(s).

Part 1: Is there a good practice way to specify the widths of table columns? (e.g. If I want to display the first column as 100px wide, the second as 80px wide and the third as 60px wide.)

Again, if you refer to the docs you will find that delegating widths to CSS via col is a good practice to follow. Ideally, you would want to use a consistent unit for widths for your entire app/website. If you are using a fluid layout having percentages, then it makes perfect sense to keep percent units for your tables as well. If you are designing for a pixel-grid layout, then pixels would be better fit for your tables.

Delegating the presentation part to CSS will also help you in implementing a responsive layout if required.

Edit:

Regarding the issue you describe of people saying CSS class names should necessarily "identify classes of elements on the page, not scalar values to be applied within the styling" and that it is not semantic and all that stuff:

I don't personally agree to that.

IMO: See this: (http://getbootstrap.com/css) as an example. Although bootstrap is not using widths (verbatim) in names, but it does use metrics as part of class names. e.g. col-xs-6 (a column which is extra small spanning 4 columns). By all means, name your classes in a way which suits you and is easy to understand. Go ahead, create your own naming convention.