HTML Table width in percentage, table rows separated equally

Question

When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I "obliged" to do it?

E.g.:

<table cellpadding="0" cellspacing="0" width="100%" border="0">    <tr>       <td width="25%"></td>       <td width="25%"></td>       <td width="25%"></td>       <td width="25%"></td>    </tr> </table> 

OR the following could also be the right procedure, not to write the width in each tds if I want each of them to be devided equally:

<table cellpadding="0" cellspacing="0" width="100%" border="0">    <tr>       <td></td>       <td></td>       <td></td>       <td></td>    </tr> </table> 

I know it works with both manners but I just want to know the "legit" way to do it.

Answer 1

Use the property table-layout:fixed; on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves.

<table style='table-layout:fixed;'>     <tbody>         <tr>             <td>gobble de gook</td>             <td>mibs</td>         </tr>     </tbody> </table> 

Just to throw it out there, you could also use <colgroup><col span='#' style='width:#%;'/></colgroup>, which doesn't require repetition of style per table data or giving the table an id to use in a style sheet. I think setting the widths on the first row is enough though.

Answer 2

You need to enter the width % for each cell. But wait, there's a better way to do that, it's called CSS:

<style>      .equalDivide tr td { width:25%; } </style>  <table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">    <tr>       <td></td>       <td></td>       <td></td>       <td></td>    </tr> </table>