1 Attachment(s)
[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">
</td>
</tr>
<tr>
<td width="50%" height="190" bgcolor="#22B14C"> </td>
<td width="50%" height="190" bgcolor="#FFF200"> </td></tr>
<td colspan="2" height="60" bgcolor="E26B0A"> </td>
</tr>
<tr>
<td colspan="2" height="60" bgcolor="#9BBB59"> </td>
</tr>
<tr>
<td colspan="2" height="60" bgcolor="#595959"> </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.
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.
Re: Different Table Cell sizes and colors
Hey no problems Peej! :thumb: 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 :ehh: 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:500px; height : 230px; background-color : #22B14C; float: left; position:fixed; top:30px; left: 0px;
}
.YellowDiv1 {
width:500px; height: 230px; background-color: #FFF200; float: right; position:fixed; top:30px; left: 500px;
}
.OrangeDiv {
width:1000px; height : 160px; background-color : #E26B0A; float: left; position:fixed; top:260px; left: 0px
}
.GreenDiv2 {
width:1000px; height : 160px; background-color : #9BBB59; float: left; position:fixed; top:420px; left: 0px
}
.BlackDiv2 {
width:1000px; height : 120px; background-color : #595959; float: left; position:fixed; top:580px; left: 0px
}
.BlueDiv {
width:200px; height : 350px; background-color : #538DD5; float: right; position:fixed; top:260px; left: 800px
}
.YellowDiv2 {
width:280px; height : 280px; background-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"> </div>
<div class="YellowDiv1"> </div>
<div class="OrangeDiv"> </div>
<div class="GreenDiv2"> </div>
<div class="BlackDiv2"> </div>
<div class="BlueDiv"> </div>
<div class="YellowDiv2"> </div>
</BODY>
</HTML>
Thank you anyways.
Hannes
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.
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