[web] HTML: Layout with Tables [resolved]

This topic is 5056 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I sketched my website layout to scale, on graphing paper, so that designing the table to hold my website would be easier (my whole website is a giant hidden table, basically). Anyways, the problem is, I'm not exactly sure how the browser interprets tables. Here's the top row of my website (listed by widths of the cells, in pixels): 100; 25; 525; 25; 100 That's what I want it to be, anyways. All the cells are empty at the moment. My actual website looks nothing like the intended widths. Here's my table:
[source lang=HTML]
<tr>

<td colspan=4></td>
<td></td>
<td colspan=21></td>
<td></td>
<td colspan=4></td>

</tr>
</table>


My hope was, the browser would do the math here like so: add up all colspans, divide by table width, and that would the standard cell width. What would be the right way to do this? [Edited by - v0dKA on September 11, 2004 10:47:58 PM]

Share on other sites
use percentages?

(or ditch tables and use css)

Share on other sites
You can just do <td width="25">

Learning CSS is a worthy goal, though.

You can never tell the browser what to do, you can only advise it. The browser is unlikely (I don't think any do) to add up the colspans and divide by the number. A browser would move the colspan boundaries freely depending on content.

What you wanted was:

<table width="775"><tr><td width="100"></td><td width="25"></td><td width="525"></td><td width="25"></td><td width="100"></td></tr></table>

Using CSS gives you more control, more flexibility and cleaner fallback.

Share on other sites
Note that an entirely empty cell won't be draw or measured the way you want. You should make each cell contain at least one non-blank character, such as the non-breaking space (& nbsp ;).

Also, unless your table sets cell padding, spacing and border widths to 0, some overhead will be used for that, rather than cell contents.

Share on other sites
I need a table layout somewhat like this:

_______________________________________________________________|         |    |                                 |   |         ||         |    |                                 |   |         ||_________|____|                                 |___|_________||         |    |                                 |   |         ||_________|____|                                 |___|_________||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         ||         |    |                                 |   |         |________________________________________________________________

Would that be possible with a single table tag? Note the middle column spans the whole page. That middle column I hoped to be one cell. So, in the first row, can I define a height of the the whole page for that cell? How would the third column be treated in the second row?

Is there a good way to do this?

[Edited by - v0dKA on September 11, 2004 10:05:49 PM]

Share on other sites
Fired up dreamweaver, and it spit this out at me...

<table width="100%"  border="0">  <tr>    <td width="100" height="80">&nbsp;</td>    <td width="100">&nbsp;</td>    <td width="" rowspan="3">&nbsp;</td>    <td width="100">&nbsp;</td>    <td width="100">&nbsp;</td>  </tr>  <tr>    <td height="26">&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td height="285">&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table>

Share on other sites
Quote:
 Original post by KattaFired up dreamweaver, and it spit this out at me...*** Source Snippet Removed ***

Ahh, right, the rowspan. Forgot about that.

Share on other sites
Don't use tables for a master layout. Just don't. Use frames if you have to, because frames were intended for that sort of thing. Tables are for representing tabular data.

If you have to, nest tables instead of using one monolithic table to create a specific layout. This makes it easier to replace tables with layers as needed, and makes the table structure easier to understand.

[Edited by - igni ferroque on September 12, 2004 6:51:51 PM]

Share on other sites
Quote:
 Original post by igni ferroqueDon't use tables for a master layout. Just don't. Use frames if you have to, because frames were intended for that sort of thing. Tables are for representing tabular data.If you have to, nest tables instead of using one monolithic table to create a specific layout. This makes it easier to replace tables with layers as needed, and makes the table structure easier to understand.

ACtually, tables are the only way to ensure boxability (word?), meaning that the boxes stay aligned like in the forums here. You look on the index page for the forums and you'll see however big one datum might be, the entire row spans that height. Doing htis with divs will prove to be very..very difficult.

1. 1
2. 2
Rutin
23
3. 3
JoeJ
20
4. 4
5. 5

• 24
• 40
• 23
• 13
• 13
• Forum Statistics

• Total Topics
631734
• Total Posts
3001933
×