table widths vs div widths 2

[jimmyshoes]

I have been doing an experiment and have found that unlike divs nested tables do not stretch to 100% of the width.
regardless of the ins and outs of using nested tables, I'd be interested to learn why this is.

<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<!-- This stretches to about 98 % of screen width -->
<td><div style="border-bottom: #000000 1px solid"></div></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<!-- This stretches to 100% of screen width -->
<div style="border-bottom: #000000 1px solid"></div>

 

[feherke]

Hi

While the first [tt]div[/tt] is inside the [tt]table[/tt], it stretches at the 100% of the available ( meaning inner area of the [tt]table[/tt] ) space.

And the inner area of the [tt]table[/tt] is reduce by the [tt]table[/tt]'s defaults. Adding this style will remove those defaults in FireFox :

table { border-spacing: 0 }
td { padding: 0 }

Other browsers may have other defaults which eats up the available space. ( Not mentioning that Explorer 6 has no idea about [tt]border-spacing[/tt]... )

Feherke.

http://rootshell.be/~feherke/

 

[jimmyshoes]

Thank you...very imformative

 

[Vragabond]

Tables, by default, have different width than divs. Divs' default width is 100%, or the entire horizontal space of the parent container. Tables' default width is auto, or the width of the content inside the table. This has nothing to do with nesting -- nesting is a bad practice in any case.

If you apply widths (100%) to the tables, then they will behave similarly to divs. However, tables will, because of their nature of always trying to fit the content and disregarding given proportions, always be a poor choice for laying out a page.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks. That's very helpful