Table Structure with CSS [Archive] - Dynamic Drive Forums

View Full Version : Table Structure with CSS

dcr33

07-10-2011, 01:51 PM

Hi :)
I want to create the following structure with CSS.
Also when the mouse hovers over the top right table, it enlarges the table in a white background as shown in the attached picture.
How to do that?

traq

07-10-2011, 09:43 PM

this looks like tabular information: it should be in a table, not a css layout.

you could use something like colorbox (http://colorpowered.com/colorbox/) to do the hover effect (although it doesn't look like a very usable effect: it makes the entire group of tables hard to read).

dcr33

07-11-2011, 01:55 AM

this looks like tabular information: it should be in a table, not a css layout.

you could use something like colorbox to do the hover effect (although it doesn't look like a very usable effect: it makes the entire group of tables hard to read).
__________________
No Sir ,I cannot use any software like Colorbox you mentioned@traq.
I have to design a CSS code for this template but need some guidance of the experts here.
I am new to this forum & I joined here in hope that I can find some really good code and genuine help like the codes in dynamicdrive.com which is really cool and helpful.:cool:.There are many advanced topics in dynamicdrive.com, so looking forward for some positive help from this forum.
The above template is nothing compared to the topics already covered here.
So I feel the experts will try to guide me on this .
I have already tried by myself but cannot figure out how to do the rest-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.t1
{
width:500px;
height:200px;
position:absolute;
top:10px;
left:10px;
border:3px solclass;
}

.a
{ background-color:#DDE4FF ;
text-align:center;
color:#36454C;
}
.b
{ background-color: #D0DAFD ;
color:#36454C;
}

.c
{ background-color: #EFF3FF ;

}

.d
{ background-color: #EAEDFF ;

}

</style>

</head>

<body>


<table class="t1">
<tr>
<th scope="col" class="a">Comedy</th>
<th scope="col" class="b">Adventure</th>
<th scope="col" class="a">Action</th>
<th scope="col" class="b">Children</th>
</tr>
<tr> <td class=c>Scary Movie</td> <td class=d>11</td> <td class=c>11</td> <td class=d>11</td> </tr>
<tr><td class=c>Epic Movie</td> <td class=d>11</td> <td class=c>11</td> <td class=d>11</td> </tr>
<tr><td class=c>Spartan</td> <td class=d>11</td> <td class=c>11</td> <td class=d>11</td> </tr>
<tr><td class=c>Dr. Dolittle</td> <td class=d>11</td> <td class=c>11</td> <td class=d>11</td> </tr>
</table>

</body>
</html>

Hope the Experts here won't dishearten me .....:rolleyes:

ashokbe

07-13-2011, 10:46 AM

wen mouseover the to right side of the table, it is enlarged to the white background table..
use the onmouseover event javascript...see the exmples in dynamicdrive.com for the mouseover...

dcr33

07-13-2011, 06:13 PM

Well that is not a problem.In fact I have said wrong about that there is no "mouse over" event.That should be overlapping tables with z-index .
What I want to do is give different colors to different cells with the help of colgroup.There should be no use of any other language or script(Javascript ,PHP ) other than CSS.
Can anyone tell me how to give different colors to the above tables with CSS colgroup property??:rolleyes:
Pls help

traq

07-13-2011, 07:21 PM

you might want to look here (http://www.w3.org/TR/CSS2/tables.html#columns).

You've rejected two perfectly good ideas to solve your problem. Is this a school assignment? If so, you should be researching it yourself, not looking for someone to provide the answer for you.