CSS table column width with HTML5

When sizing HTML table columns I used to use the colgroup and col tags to give a table column a specific width. I’ve learned this is not best practice with HTML5 although you will still see plenty of articles recommending this approach.

Here is how I used to do it:


    ...
    
    ...
    

This is not the best solution any more. The col tag is obsolete in HTML5 – https://developer.mozilla.org/en/docs/Web/HTML/Element/col.

The best practice approach is to use CSS. I personally don’t want to have to code every table column in my CSS file so I just add width using the style attribute to the cells in the first row of the table and the subsequent rows will adopt the same width as well.

Example:


    ...
    
Title Title

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.