Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which is the better way of specifying HTML Fixed Column width (width or style attribute)

I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?

By width attribute

<table width="900">
    <tr>
        <td width="450">A</td>
        <td colspan="2" width="450">B&C</td>
    </tr>
    ....
</table>

OR by style attribute

<table style="width:900px;">
    <tr>
        <td style="width: 450px;">A</td>
        <td colspan="2" style="width: 450px;">B&C</td>
    </tr>
    ....
</table>
like image 775
Nap Avatar asked Oct 06 '09 06:10

Nap


1 Answers

Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:

If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.

table
{
table-layout:fixed;
}

Now to answer your question.

Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.

For example...

<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>

What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.

Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.

The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck

like image 167
JL. Avatar answered Oct 02 '22 09:10

JL.