What is the correct way to sort html columns?

Question

A simple question, I was wondering that in 2011 is this the right way to size html tables? (containing tabular data, of course!)

Should the following ways stay?

<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 ​​identifier (or class) and set its width using CSS?

Thanks for your input!

Answer 1

I used colgroup and col methods, for example:

 <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 2

You can use col or colgroup for this 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 classes:

 col.x { ... } 

Answer 3

In 2011? Since 2000, it has been better to use class -names and CSS styles to ensure the width of the table cells.

If they do not have the same width, then simply use:

 th /* or td */ { width: 20%; } 

You could supposedly use nth-child :

 tr th:nth-child(1) { /* styles the first th of the tr */ } 

JS Fiddle demo using nth-child() css .

Answer 4

My personal preference is to use the width attribute for column tags.

 <table> <col width="15%"></col> <col width="20%"></col> ...etc... 

It saves part of the presentation from the contents of the table, so to speak.