CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    [RESOLVED] Different Table Cell sizes and colors

    Hello. I hope someone can help me.

    I am trying to do ( as in the attached picture ) only with the table tags.

    This is my progress :

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    HTML>
    <
    HEAD>
    <
    TITLE>Layout Practical 1</TITLE>
    </
    HEAD>
    <
    BODY>
    <
    table border="0" cellpadding="0" cellspacing="0" width="100%" height="600">
        
        <
    tr>
            <
    td valign="top" colspan="2" bgcolor "#000000" height="10">
            
            &
    nbsp;</td>
        </
    tr>

        <
    tr>
            <
    td width="50%" height="190" bgcolor="#22B14C">&nbsp;</td>
            <
    td width="50%"  height="190" bgcolor="#FFF200">&nbsp;</td></tr>

            <
    td  colspan="2"  height="60" bgcolor="E26B0A">&nbsp;</td>
                    
        </
    tr>
        <
    tr>
            <
    td  colspan="2" height="60" bgcolor="#9BBB59">&nbsp;</td>
        </
    tr>
        <
    tr>
            <
    td  colspan="2" height="60" bgcolor="#595959">&nbsp;</td>
        </
    tr>
    </
    table>


    </
    BODY>
    </
    HTML
    I am almost there, I do not want to use anything else except the table tag. This is for my students.
    Attached Images Attached Images  

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Different Table Cell sizes and colors

    Sorry this reply is so late. I'm still without internet in my home...

    Unfortunately, such a layout is not possible with tables (and neither floating divs for that matter). Too much overlapping on certain elements. If the blue didn't come down into the gray. Then you could do it all and just overlay the yellow statically. But that would still have some serious limitations.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Different Table Cell sizes and colors

    Hey no problems Peej! I am also not so frequent on the forums as I am currently looking for employment. Hence this question.

    I thought as much, and even let the people that gave me the test know, unfortunately they didn't agree Yes, I am seriuos, they wanted it only with HTML Tables and nothing else. I even attempted the HTML 5's Canvas capabilities, but the exercise should have been solely in HTML 4.

    The closest I got was with CSS and DIVs, here is the code

    CSS :

    PHP Code:
    .BlackDiv1 {
    background-color#000000; height:30px; width: 1000px; z-index: 1; position:absolute; left:0; top:0;
    }

    .
    GreenDiv1 {
    width:500pxheight 230pxbackground-color #22B14C; float: left; position:fixed; top:30px; left: 0px;
    }

    .
    YellowDiv1 {
    width:500pxheight230pxbackground-color#FFF200; float: right; position:fixed; top:30px; left: 500px;
    }

    .
    OrangeDiv {
    width:1000pxheight 160pxbackground-color #E26B0A; float: left; position:fixed; top:260px; left: 0px
    }

    .
    GreenDiv2 {
    width:1000pxheight 160pxbackground-color #9BBB59; float: left; position:fixed; top:420px; left: 0px
    }

    .
    BlackDiv2 {
    width:1000pxheight 120pxbackground-color #595959; float: left; position:fixed; top:580px; left: 0px
    }

    .
    BlueDiv {
    width:200pxheight 350pxbackground-color #538DD5; float: right; position:fixed; top:260px; left: 800px
    }

    .
    YellowDiv2 {
    width:280pxheight 280pxbackground-color #FFF200; float: right; position:fixed; top:500px; left: 350px

    HTML :

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    HTML>
    <
    HEAD>
    <
    TITLE>Layout Practical 2</TITLE>

    <
    LINK REL="stylesheet" TYPE="text/css" HREF="Layout_Practical_2_Styles.css">

    </
    HEAD>
    <
    BODY>
        
            <
    div class="BlackDiv1"></div>

            <
    div class="GreenDiv1">&nbsp;</div>
            <
    div  class="YellowDiv1">&nbsp;</div>

            <
    div  class="OrangeDiv">&nbsp;</div>
                    
            <
    div  class="GreenDiv2">&nbsp;</div>

            <
    div  class="BlackDiv2">&nbsp;</div>


            <
    div  class="BlueDiv">&nbsp;</div>

            <
    div  class="YellowDiv2">&nbsp;</div>
    </
    BODY>
    </
    HTML
    Thank you anyways.

    Hannes

  4. #4
    Join Date
    Apr 2000
    Location
    Belgium (Europe)
    Posts
    4,626

    Re: Different Table Cell sizes and colors

    I guess it depends...

    the problem issue is the yellow square that runs "trough" other cells, which just't can't happen. Using colspan/rowspan should only result in rectangular areas, where this needs 2 non rectangular area's. The olive and the dark gray at the bottom.

    You might be able to construct something 'invalid' which happens to render as you want it to, but it'll probably be specific to a certain browser and version only.

    but the underlying question of course... does it actually have to BE like in the image or does it only have to LOOK that way?

    Creating the image is totally doable if you just keep it as separate cells without cell merging (row/col spanning) and you just color individual cells appropriately.

  5. #5
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Different Table Cell sizes and colors

    Yes, it had to be precisely like the image. To be honest, I didn't think of having separate cells, which would most likely work. But I cannot see the whole logic in this whole exercise at all. Perhaps I'm just getting old, frustrated and grumpy ( well, more grumpy than usual )

    Thanks guys for all your input, today I have learned something

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured