Table Trouble

  MrGoldfish 16:49 12 Jan 04
Locked

Hey all!
Can someone please shine some light on my problem. I have a table at the top of my page and now i want another seprate table to be below that one. But i can't get the second table to go below the first one. it is always placed to the right of the first one. I've tried using the BR> tag but when it does place the table under the first one it puts it just a little further down than i want it to be. Can anyone help me? PLEEEEEEEEAAAAASSSEE!!! the html code i have looks loike this:

BODY>
table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" background="images/topbg.jpg">
tr>
td width="100%"> img src="images/topname.jpg"> /td>
/tr>
/table>

table width="100%" border="0" align="left" cellpadding="0" cellspacing"0" background="images/buttonbar.jpg">
tr>
td> the button bar!!! /td>
/tr>
/table>

  igk 17:39 12 Jan 04

Try this,html:
<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="100%"> </td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
</table>

</body>

</html>

Hope this helps.

  Forum Editor 18:20 12 Jan 04

do you want it to go?

A simple way of achieving the same result is to insert a few more rows into your existing table. Merge a row of blank cells at the bottom of the top table and set the background to the same colour as your page background. Then start your 'second' table from the next row. Publish to your server, and you'll have precisely the effect you want, with no chance of anything moving.

  MrGoldfish 22:21 12 Jan 04

the effect i'm going for is like this:

click here

At the top there is a wooden and a rock face kind of area. Looking at the source code it looks like the are 2 different backgrounds for 2 different tables. But i can't get two different tables to sit ontop of eachother like that site has. i dont know what to do.

  Taran 23:11 12 Jan 04

That site uses multiple tables and some <div> and CSS coding for the positioning features.

A rough and simplified version using one table is as follows:

<html>
<head>
<title></title>
</head>

<body>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr valign="top">
<td width="160">Link1<br>
Link2<br>
Link3 </td>
<td> </td>
<td width="160">
<p>News Item 1<br>
text copy...</p>
<p>News Item 2<br>
text copy...</p></td>
</tr>
<tr>
<td colspan="3">Footer area...</td>
</tr>
</table>

</body>
</html>


While another example that uses three seperate tables is:

<html>
<head>
<title></title>
</head>

<body>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr valign="top">
<td width="160">Link 1<br>
Link2<br>
Link3</td>
<td> </td>
<td width="160">
<p>News Item1<br>
text copy...</p>
<p> </p>
<p>News Item 2<br>
tesxt copy...</p></td>
</tr>
<tr>
<td colspan="3">Footer area for copyright statement...</td>
</tr>
</table>

</body>
</html>

I've put some simple text into each page to show rough positioning of elements and I've set the border to 1 but the cell spacing and padding to 4 which gives the braod border effect. The page you gave the link to has its borders made up of table cells filled with very small repeating image tiles for the graphic effect.

Note that the left and right panels for links and news items are fixed width at 160 pixels while the table is 100% page width. This makes the layout fluid in that the top row, second row, last row and main content centre box will all resize at different screen resolutions while the left and right panels stay the width specified. You can change the width to suit, but remember that if you make the two side panels too big you will have a tiny centre content area to play with at lower screen resolutions so keep your font size under control !

Oh, the above are HTML examples [obviously] which I assumed is what you wanted. If you would prefer XHTML you can either convert the code yourself manually, or by running it through your web authoring software [depending on what you are using] or by asking in here and one of us will give you the XHTML equivalent.

Hope this gets you up and running.

  Taran 23:11 12 Jan 04

That site uses multiple tables and some <div> and CSS coding for the positioning features.

A rough and simplified version using one table is as follows:

<html>
<head>
<title></title>
</head>

<body>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr valign="top">
<td width="160">Link1<br>
Link2<br>
Link3 </td>
<td> </td>
<td width="160">
<p>News Item 1<br>
text copy...</p>
<p>News Item 2<br>
text copy...</p></td>
</tr>
<tr>
<td colspan="3">Footer area...</td>
</tr>
</table>

</body>
</html>


While another example that uses three seperate tables is:

<html>
<head>
<title></title>
</head>

<body>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr valign="top">
<td width="160">Link 1<br>
Link2<br>
Link3</td>
<td> </td>
<td width="160">
<p>News Item1<br>
text copy...</p>
<p> </p>
<p>News Item 2<br>
tesxt copy...</p></td>
</tr>
<tr>
<td colspan="3">Footer area for copyright statement...</td>
</tr>
</table>

</body>
</html>

I've put some simple text into each page to show rough positioning of elements and I've set the border to 1 but the cell spacing and padding to 4 which gives the braod border effect. The page you gave the link to has its borders made up of table cells filled with very small repeating image tiles for the graphic effect.

Note that the left and right panels for links and news items are fixed width at 160 pixels while the table is 100% page width. This makes the layout fluid in that the top row, second row, last row and main content centre box will all resize at different screen resolutions while the left and right panels stay the width specified. You can change the width to suit, but remember that if you make the two side panels too big you will have a tiny centre content area to play with at lower screen resolutions so keep your font size under control !

Oh, the above are HTML examples [obviously] which I assumed is what you wanted. If you would prefer XHTML you can either convert the code yourself manually, or by running it through your web authoring software [depending on what you are using] or by asking in here and one of us will give you the XHTML equivalent.

Hope this gets you up and running.

  Taran 23:12 12 Jan 04

My fingers are stuttering and I hit the Enter button twice...

Sorry for the duplicate reply to your thread.

T

  MrGoldfish 11:01 13 Jan 04

hey thanks for all your help you guys. i tried it all out and it now works fine. I lookedat the differences in code and found that the <ALIGN="left"> tag in the first table was making the whole thing go crazy. As soon as the tag was removed everything jumped to exactly where it should have been. Thanks again for all the help, you may just be life savers :)

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…