Page Layout with Tables

**Harvy** · Mar 9, 2002, 09:07

Why is it that when i try placing three tables like

PHP Code:


<TABLE align="left" border=1>

<TR>

    <TD>&nbsp;</TD>

</TR>

</TABLE>

<TABLE align="center" border=1>

<TR>

    <TD>&nbsp;</TD>

</TR>

</TABLE>

<TABLE align="right" border=1>

<TR>

    <TD>&nbsp;</TD>

</TR>

</TABLE>

The last table is never in line with the first 2 tables.
Am i doing something wrong or is it not possible to get 3 tables in a row???

**Saz** · Mar 9, 2002, 10:08

I've never tried to align 3 tables in a row, so I have no idea why this isn't working properly.

However, why use 3 separate, single celled, tables? You could get the same effect by using just one table split into 3 columns, like this:

Code:

<table>
  <tr>
    <td>Content Here</td>
    <td>Content Here</td>
    <td>Content Here</td>
  </tr>
</table>

**Harvy** · Mar 9, 2002, 10:23

Ok maybe i should have asked how i can layout this page so that i can have a page with 3 columns where the middle column height doesnt affect the left and right colums.

heres the page im playing with at the moment.

http://www.tomowebsite.com/indextest.php

If you could give me anymore advice on the source for the page i would be very greatfull i only just started learning about web page design 2 weeks ago.

Iv been trying to start intreducing php to make the site easier to update so the top,middle and bottom are seperate php files.

**Saz** · Mar 9, 2002, 10:49

Sorry, but the link doesn't seem to be working. I get re-directed to an error page stating that this page hasn't been made yet!

**Saz** · Mar 9, 2002, 10:57

Harvy, I noticed that you started a second thread which was almost identical to your second post here. Duplicating your posts can cause confusion among those members trying to assist you, so I have removed the duplicate thread.

**Harvy** · Mar 9, 2002, 11:05

Damn sorry about multiple post just are desperate for help on this topic i wont do it again.

Also sorry about dead link i forgot the page has been saved as php3 not php heres the correct link.

http://www.tomowebsite.com/indextest.php3

**Saz** · Mar 9, 2002, 11:40

Well, judging by the look of the page you linked to, I can see no reason why that can't be done using the table layout I showed you.

If you want the left and right colums to be divided, to accommodate your different sections, that can be done quite easily either by nesting individual tables within the two columns or dividing the columns up like this:

Code:

<table>
  <tr>
    <td>Login Area</td>
    <td rowspan="3">Main Content Area</td>
    <td>Search Area</td>
  </tr>
  <tr>
    <td>General Chat Forum Topics</td>
    <td>No Content Here</td>
  </tr>
  <tr>
    <td>Latest General Chat Forum Topics</td>
    <td>Older News Headlines</td>
  </tr>
</table>

This table would produce a layout matching your page, but in it's most basic form.

**Harvy** · Mar 9, 2002, 11:47

Hmm would that mean if the middle column expands in height the left and right columns would stay the same?

**Saz** · Mar 9, 2002, 11:55

Ok...I will try to explain this as simply as possible. If I lose you, please just say so, ok? I'm here to help....

When you create the cells within the table, you apply fixed heights to the top two cells in the left hand column and the top two cells in the right hand column.

For the bottom cell in each of these columns, you don't specify a height at all but make sure that the vertical alignment is set to 'top' (valign="top").

The main content cell also had no height specified.

Set this way, if the center column expands to allow for the content, the bottom cells in the left and right columns will expand too, but will not have any effect on the content within them.

[edit]
Scrap that idea. Hmmm, I'm sure I've got this to work before!
I have to go now as we're going out tonight. If nobody else comes up with a solution, I will try again tomorrow.

This is bugging me now as well!!!

**Harvy** · Mar 9, 2002, 12:06

Ok thx alot for trying anyways.

I am open to any solution even if it isnt just html php,css anything.

**Aes** · Mar 9, 2002, 12:46

I believe this is what Saz is trying to convey.

You cannot have a single table with three columns where the height of any one of them doesn't affect the others. However, you can get around this problem by utilizing some tables in the outside columns and having them align to the top (as Saz suggested). Here's the code:

Code:

<table width="750">
  <tr>
    <td width="163" valign="top">
      <table width="163">
        <tr>
          <td width="163" align="top">
            PLACE LEFT SIDEBAR CONTENT HERE
          </td>
        </tr>
      </table>
    </td>
    <td width="424" valign="top">
      PLACE CENTER CONTENT HERE
    </td>
    <td width="163" valign="top">
      <table width="163">
        <tr>
          <td width="163" valign="top">
            PLACE RIGHT SIDEBAR CONTENT HERE
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Using that, no matter how far the middle extends, the tables in the sidebars will only stretch to accomodate their content, and remain aligned at the top. So, while it's not exactly what you wanted, it will look exactly the same as the result of what you wanted.

Just modify and salt to taste. If you still have problems don't hesitate to let us know! I look forward to seeing you around the forums!

-Colin

**geiger** · Mar 9, 2002, 12:51

why not create a table with three columns, and in each column put a separate table? for each column you can define a width (if you want the middle only to expand, put no width), and if you don't define a height for the inner tables then they will only strech to their own height, regardless of the others.

like so

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

**Harvy** · Mar 9, 2002, 12:58

Ah nice so with this i should be able to split the sections into seperate php files also.

**geiger** · Mar 9, 2002, 13:01

[nevermind, i'm wrong]

**Aes** · Mar 9, 2002, 13:04

Geiger -- you repeated exactly what I told him to do, you goof.

Additionally -- SSI has nothing to do with PHP -- if he has PHP he has no need for SSI.

-Colin

**geiger** · Mar 9, 2002, 13:06

lol did i? im sorry!

**Aes** · Mar 9, 2002, 13:12

Yeah, you did. Why don't you read posts before you post yourself! You'd save people so much trouble, not to mention spare us of that useless drabble you call humor!

Actually, it's no problem man.

-Colin

**Saz** · Mar 10, 2002, 04:15

Thanks Aes

I realised that I should have put nested tables in as soon as I'd logged off, but couldn't come back as I would have been late getting ready to go out.

**Aes** · Mar 10, 2002, 18:35

No problem Saz. T'was your idea for the tables nested in the columns in the first place.

-Colin

The SitePoint Forums have moved.

User Tag List

Thread: Page Layout with Tables

Thread Tools

Display

Hybrid View

Page Layout with Tables

Bookmarks

Bookmarks

Posting Permissions