Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Oct 2007
    Posts
    10
    Member #
    15957
    Hi,I'm new to this great forum.Although I have a basic HTML knowledge I don't know how to create a table with different column sizes per each row.I tried the trick of creating different tables as rows but it just doen't work efficiently.Has anybody a clue about that?Thanks in advance.

  2.  

  3. #2
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Hmm, can you give an example of what you're trying to do? It seems like maybe tables isn't the right solution. It sounds like you want different table cells in the same column to be different widths which isn't really possible.
    But, I guess you could use colspan or something.
    choosy developers choose gif!
    website | paintings | blog

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, this is the kind of thing you'd be wanting CSS for.

  5. #4
    Junior Member
    Join Date
    Oct 2007
    Posts
    10
    Member #
    15957
    Well,I think that's far better to describe the table. First row must have 2 cells, with different width.Second row has only one cell that occupies the whole row.Third row has 3 cells with different width, so there is no match to the width of first row cells too.I don't really know if I can create this table using pure html or I must use CSS.If the case is the latter, could you tell me how to use CSS for this purpose?Thanks a lot.

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I'd go for CSS, if possible. With CSS, you can just do something like this:

    HTML Code:
    <div id="row1">
      <div id="box1"></div>
      <div id="box2"></div>
    </div>
    <div id="row2">
    
    </div>
    <div id="row3">
      <div id="box3"></div>
      <div id="box4"></div>
      <div id="box5"></div>
    </div>
    This is quite a logical and simple structure, see? Now, here's what you need to do for the CSS. First, we need to make sure each row has a set width, say 500px width. It's possible to get fluid widths here too, if you want. At this point I usually also set the clear:both rule, to make sure each row clears the row above it (won't appear to its side). It's not always necessary, though.

    Code:
    #row1, #row2, #row3{
      width: 500px;
      clear: both;
    }
    Next we can simple give each box a width. The key here is to make sure they appear on the same "line" as the one before it is to use floats. Basically if you float something, it'll be pushed as far left or right (depending on the float direction) as it will fit.

    Code:
    #box1{
      float: left;
      width: 200px;
    }
    
    #box2{
      float: left;
      width: 300px;
    }
    These two boxes should now snugly fit in the first row. Simple, see? Be careful when putting in paddings and margins, as they might throw it off. If you get frustrated doing that, just give another inner div for you to style. I don't think the third row should be a problem for you now.

    Good luck!
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Junior Member
    Join Date
    Oct 2007
    Posts
    10
    Member #
    15957
    Thanks a lot Steax.Your idea was fine.With little modification and the addition of black borders in boxes and a central box, all worked fine.Thanks again.

  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    You're welcome. Glad it worked out as expected (that doesn't always happen, lol). Remember to double-check on all browsers.

    And you might also be interested in Blueprintcss if you need this often.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com