Results 1 to 6 of 6

Thread: Table Structure with CSS

  1. #1
    Join Date
    Jul 2011
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Table Structure with CSS

    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?

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  3. #3
    Join Date
    Jul 2011
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Lightbulb

    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 .....
    Last edited by dcr33; 07-11-2011 at 11:12 AM. Reason: mistake

  4. #4
    Join Date
    May 2011
    Location
    Bangalore
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Jul 2011
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default re:

    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

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.

Bookmarks

Posting Permissions

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