Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sylinic .
Sylinic .
2,761 Points

HTML Tables

Hi guys, I would greatly appreciate help figuring this out.

I'm working on a HTML table puzzle trying to match this image here

https://www.dropbox.com/s/rjpbbs3vonuawl5/table02.gif?dl=0

I have everything good, make the red pillars on both sides using the rowspan tag, have the 1st, 2nd, 4th, and 5th row good, but the third row, with the three purple rectangles I just can't get to center themselves and resize to the smaller size without breaking the table.

Please, any help, much gratitude.

----------------------------------------------CODE------------------------------------------------------

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title>

    <style>
        body { background-color:black;}
        table { background-color:white;
                margin: 0px auto;
                width:1000px;
                height:500px;}
        td { width:200px;
             height:100px;
        }


    </style>

</head>

<body>

<table border="2px solid white">
    <tr>
        <td bgcolor="red" rowspan="5" align="left"></td>
        <td bgcolor="white"></td>

        <td bgcolor="green" colspan="2" align="center" colspan="2"></td>

        <td bgcolor="white"></td>
        <td bgcolor="red" rowspan="5" align="right"></td>
    </tr>

    <tr>
        <td bgcolor="blue" colspan="4"></td>
    </tr>

    <tr>



        <td bgcolor="purple"></td>

        <td bgcolor="purple"></td>

        <td bgcolor="purple"></td>


    </tr>

    <tr>
        <td bgcolor="green" colspan="4"></td>
    </tr>

    <tr>
        <td bgcolor="purple" colspan="4"></td>
    </tr>
</table>

</body> </html>

Justin Horner
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

Hello Sylinic,

Would you post or link to your code? This will enable others to help discover your attempt and provide a solution for you.

Thanks :)

Sylinic .
Sylinic .
2,761 Points

Doh! Yeah that would help, huh? :3

I'll post it in main section.

1 Answer

Michelle Giralico
Michelle Giralico
8,328 Points
Michelle Giralico
Michelle Giralico
8,328 Points

Have you tried specifying a white td between the purple?

<tr>
        <td bgcolor="white"></td>
        <td bgcolor="purple"></td>
        <td bgcolor="white"></td>
        <td bgcolor="purple"></td>
        <td bgcolor="white"></td>
        <td bgcolor="purple"></td>
        <td bgcolor="white"></td>
</tr>