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:

<table>
    <colgroup>
        <col width="220px">
        <col>
    </colgroup>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
</table>

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:

<table>
    <thead>
        <tr>
            <th style="width:220px">Title</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>

Leave a Reply

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

CAPTCHA - answer the question below to prove you are human *

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