SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page Layout with Tables

    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???

  2. #2
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  3. #3
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  5. #5
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  6. #6
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  8. #8
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm would that mean if the middle column expands in height the left and right columns would stay the same?

  9. #9
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!
    Last edited by Saz249; Mar 9, 2002 at 12:02.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  10. #10
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thx alot for trying anyways.

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

  11. #11
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  12. #12
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  13. #13
    SitePoint Zealot Harvy's Avatar
    Join Date
    Feb 2002
    Location
    Aberdeen, Scotland
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah nice so with this i should be able to split the sections into seperate php files also.

  14. #14
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [nevermind, i'm wrong]
    Last edited by geiger; Mar 9, 2002 at 13:07.

  15. #15
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  16. #16
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol did i? im sorry!

  17. #17
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  18. #18
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  19. #19
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem Saz. T'was your idea for the tables nested in the columns in the first place.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •