table, td, th { border : 1px solid black; }

  1. gridTable

{ height : 250px; width  : 900px; }

h2 { color : rgb(255,0,0); } h4 { color : rgb(0,0,255); }

.myButton { -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3; -webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3; box-shadow:inset 0px 1px 3px 0px #91b8b3; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c)); background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0); background-color:#768d87; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #566963; display:inline-block; cursor:pointer; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:11px 23px; text-decoration:none; text-shadow:0px -1px 0px #2b665e; width:150px; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87)); background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0); background-color:#6c7c7c; } .myButton:active { position:relative; top:1px; }

td { width: 20px; height: 20px; border: 1px solid #ccc; cursor: pointer; }

td.On { //background-color: #f00; background-color: red; }

td.On1 { //background-color: #f00; background-color: green; } td.On2 { //background-color: #f00; background-color: blue; }

td:hover { width: 18px; height: 18px; border: 2px solid #555; }

input[type=button] { cursor: pointer; }

div#Output { padding: 5px; background-color: #eee; font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 12px; color: #333; margin: 10px auto; }

  1. colorTable tr{ /* makes all columns red */
   background-color: red;

}

  1. colorTable tr+tr { /* makes 2nd and 3rd columns yellow */
   background-color: green;

}

  1. colorTable tr+tr+tr { /* makes 3rd column blue */
   background-color: blue;

}