simple table layout
Hi
i know this must sound really simple.
What i want to do is have a table with 3 rows. I want the width and height set to 100%
row1: overall height 20%
1st column wdth 25% 2nd col. 50% 3rd col. 25%
row2: overall height 50%
two columns wdth *50%
Row 3: overall hieght 30%
1 column wdth 100%
it may be easier to understand if i illustrate it:
----------------
I.....I........I..... I ROW1
----------------
...........I
...........I ROW2
...........I
----------------
I.....................I ROW3
----------------
it may help to look at the picture ive attached
i have been trying all weekend to do this but i cant seem to get it to work using percentages.
Please help!
thanks!
problem attaching picture so you can view it at:
http://www.click4pc.co.uk/test/TABLE.gif
| Attachment | Size |
|---|---|
| TABLE.gif | 5.83 KB |
Megan posted this at 02:35 — 2nd January 2005.
She has: 11,421 posts
Joined: Jun 1999
Try using three separate tables instead of one big table. This way you'll get better control over the widths. It may also help with downloading because some browsers need to download an entire table before they can display any part of it**
** Is this still true? Or was it just a Netscape problem?
Megan
Connect with us on Facebook!
Abhishek Reddy posted this at 05:23 — 2nd January 2005.
He has: 3,348 posts
Joined: Jul 2001
Firstly, the point of a scrollbar is to accommodate overflow. Why do you want to limit your content to the window frame? Secondly, it's hard to get height to work reliably.
Widths are a little easier to deal with. Try as Megan suggests and use three tables.
Busy posted this at 09:22 — 2nd January 2005.
He has: 6,151 posts
Joined: May 2001
You have to use two tables for the top two cells, unless you add another row on top and give it four cells (all of the lower ones). The lower tables need a base, in this case it is three columns, you can't split 3 into 1.5 with tables, can only split into whole numbers - 2-1, 3, 1, 1-2
While browsers understand width="100%" not all understand height="100%" because a page has no real height (it scrolls). Using height=" less than 100% " is even worse as it has no base to set itself from. If you set an outer table to a fixed height you can (but shouldn't) set the percentage heights.
Tables still have to be loaded but it does it faster these days so isn't noticed like it was many versions ago.
Renegade posted this at 09:52 — 2nd January 2005.
He has: 3,022 posts
Joined: Oct 2002
I gave it a try, you'll want to use at least two tables.
What I did is found below:
<html><head>
<title>Re: Simple table layout</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"> </td>
<td width="50%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td colspan="3" width="100%">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" width="100%"> </td>
</tr>
</table>
</body>
</html>
hawkins786 posted this at 00:01 — 3rd January 2005.
They have: 4 posts
Joined: Dec 2004
Hi everybody
thanks for all the replies
Renegade i changed your code around a little bit:
Width=25%, height=20%
Width=50%, height=20%
Width=25%, height=20%
Width=50%, height=50%
Width=50%, height=50%
Width=100%, height=30%
works great! Thanks so much, you saved me a lot of messing about!
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.