I am trying to re-create two different looks for a table.
I need the CSS for these two tables...
I need the CSS for these two tables...
Need CSS for two tables
Here is a quick example to begin working with.
Change the groove type of border to none, dotted, dashed, solid, double, groove, ridge, inset, outset and change thin to other thicknesses, including pixel values.
goes in the head of the html document:
This goes in the actual document body to create the tables:
Change the groove type of border to none, dotted, dashed, solid, double, groove, ridge, inset, outset and change thin to other thicknesses, including pixel values.
goes in the head of the html document:
| Code: |
| <style type="text/css">
<!-- th { background: #c0c0c0; border: thin groove #000; } .row td{ background: #c0c0c0; border: thin groove #000; } .col td{ background: #c0c0c0; border: thin groove #000; } body { background: #c0c0c0; } td { background: #fff; border: 1px solid #ccc; } --> </style> </head> |
This goes in the actual document body to create the tables:
| Code: |
|
<table width="500" border="1"> <tr> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> </tr> <tr> <th scope="row" class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> |
This is a old thread but I improved on the above css for my own purpose. Thought somebody might find it useful so posting it.
| Code: |
|
<html> <head> <style type="text/css"> <!-- th { background: #c0c0c0; border-bottom: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #fff; border-left: 1px solid #fff; } .row td{ background: #c0c0c0; border: solid 1px #000; } .col td{ background: #c0c0c0; border: solid 1px #000; } body { background: #c0c0c0; } td { background: #fff; border: solid 1px #ccc; } table { border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #000; border-left: 1px solid #000; } --> </style> </head> <table width="500" border="0" cellspacing=0 cellpadding=0> <tr> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> <th scope="col" class="col"> </th> </tr> <tr> <th scope="row" class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"class="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </html> |
kv, that is the closest I've see... thanks a lot.
 |