Page layout with tables
Hi,
I'm learning heaps with HTML and tables but haven't been able to work this one out.
For an example page try - http://www.seriousexcuses.com/index2.html
How do I arrange the tables so that the main content area and right nav bar area are independent of each other sizewise. I don't want to use frames. When the page is resized or the text size for the browser is resized, the layout is all out of alignment.
Is there a better way of doing this?
Thanks in advance,
Annette
Busy posted this at 05:53 — 11th October 2001.
He has: 6,151 posts
Joined: May 2001
The example you give uses graphics in table cells, but without the graphic cells this is a very basic set up, well usually aournd the other way, smaller cell on the left.
<table border="1" cellspacing="0" cellpadding="0" width="100%"><tr><td>this is the left cell</td>
<td width="200">this is the right cell</td>
</tr></table>
Now, this is the basic table,
border set to 1 to see how it displays while making it ..., cellpadding and spacing set to 0 to make it tight,
table width at 100% which will expand/contract to fit any screen.
the first table cell (td) has no width, as this will take up the slack of whats missing from the right cell which has a fixed width of 200 (dont use % for td's).
the way they have done that page, without rewriting all the code, is like this, the |'s are table walls
|g| text |g| text |g|
the g is the graphic, the text is the text ... so instead of 2 td's, youd use 5.
If your not going to use a graphics as dividers but adopted the two cell table layout consider making a single table above your main page, make a top table for your banner, graphic, nam, text etc while all your content is in the second major table. doing this displays the top table while the second is loading of it ever gets really big, the guests get to see something instead of a blank page while it loads.
I hope all this makes sense lol
just remember to set your table cell to 100%, have one fixed sized cell and it will expand/contract to suit the browser window.
oh and remember, with default body settings, a 800 screen isnt 800 wide, browsers add a default of about 5 pixels (differs between browsers) so never make a image or table etc 800 wide or you'll get scroll bars.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.