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 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.

.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-

Code:

<!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 markup-->  
     
    <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 .....

**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??

Pls help

**traq** · 07-13-2011, 07:21 PM

you might want to look here.

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.

Thread: Table Structure with CSS

Thread Tools

Search Thread

Table Structure with CSS

re:

Bookmarks

Bookmarks

Posting Permissions