What is the right way to size html columns? - html

Question

Simple question, I was wondering, what in 2011 is the right way to size html tables? (containing tabular data, of course!)
Should the following still be the way to go?
<tr>
<th width="45%">Name</th>
<th width="10%">Author</th>
<th width="20%">Description</th>
<th width="10%">Rating</th>
<th width="15%">Download</th>
</tr>
Or would it be better to give each column an ID (or class) and set its width with CSS?
Thank you for your input!

Answer 1

You can use col or colgroup for that purpose.
<table>
<col class="x"/>
<col class="y"/>
<col class="z"/>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
...and apply styles to the classes:
col.x {
...
}

Answer 2

In 2011? From about 2000 onwards it was the better approach to use class-names and CSS styles to give table-cells their width.
Unless they're all the same width, in which case just use:
th /* or td */ {
width: 20%;
}
You could, conceivably, use nth-child too:
tr th:nth-child(1) {
/* styles the first th of the tr */
}
JS Fiddle demo, using nth-child() css.

Answer 3

I've taken to using colgroup and col tags, like this:
<table>
<colgroup>
<col width="45%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="10%"></col>
<col width="15%"></col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Author</th>
<th>Description</th>
<th>Rating</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Answer 4

My personal preference is to use the width attribute on column tags.
<table>
<col width="15%"></col>
<col width="20%"></col>
...etc...
It keeps the presentation part out of the table content, so to speak.