Styling a html table with css

A table doesn’t have to be boring and predictable, you can use css to style it up and make it stand out.

CSS code:

body { 
 margin:0;
 padding:0;
 font-size:15px;
 font-family:"Helvetica", verdana;
}
table, thead, tbody, tfoot, th, td, h1 {
 margin:0;
 padding:0;
}
table {
 background:#A7D8D8;
 border:1px solid #79B2AF;
 border-collapse:seperate;
 border-width:0 1px 1px 0;
 border-spacing:4px;
 color:#333;
 margin:20px auto 0 auto;
 max-width:900px;
 min-width:500px;
 padding:20px 5px 5px 5px;
 width:95%;
}
caption h1 {
 background:#F38630;
 border:1px solid red;
 border-width:0 1px 1px 0;
 color:#38210e;
 display:inline-block;
 font-size:18px;
 position:relative;
 text-shadow:0 1px 1px #eecaae;
 top:14px;
}
th, td {
 border-width:5px;
 padding:1px 6px;
}
th {
 color:#31605d;
}
thead, td {
 text-align:center;
}
td:empty {
 background:A7DBD8;
 border:0;
}
thead th {
 background:#D3EDEB;
 background:rgba(255, 255, 255, 0.5);
}
thead tr:nth-of-type(n+2) th {
 background:#C1E5E3;
 background:rgba(255, 255, 255, 0.3);
}
tfoot td {
 font-style:italic;
 font-family:"Georgia";
 background:#95C4c1;
 font-weight:bold;
 padding:5px 6px;
 text-shadow:0 1px 1px #fff; 
}
th[scope=row] {
 font-variant:small-caps;
 letter-spacing:1px;
}
tbody td {
 font-style:italic;
 font-family:"Georgia";
 text-shadow:0 1px 1px fff;
 background:#e5f2f1;
}

HTML code:

<html>
<head>
<title>html table</title>
<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>
<table>
<caption><h1>HTML Template caption</h1></caption>
<thead>
 <tr>
  <th scope="col">Column one</th>
  <th scope="col">Column Two</th>
  <th scope="col">Column Three</th>
  <th scope="col">Column Four</th>
  <th scope="col">Column Five</th>
  <th scope="col">Column Six</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td scope="row">Footer item 1</td>
  <td scope="row">Footer item 2</td>
  <td scope="row">Footer item 3</td>
  <td scope="row">Footer item 4</td>
  <td scope="row">Footer item 5</td>
  <td scope="row">Footer item 6</td>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td scope="row">item 1</td>
  <td scope="row">item 2</td>
  <td scope="row">item 3</td>
  <td scope="row">Titem 4</td>
  <td scope="row">item 5</td>
  <td scope="row">item 6</td>
  </tr>
 <tr>
  <td scope="row">item 1</td>
  <td scope="row">item 2</td>
  <td scope="row">item 3</td>
  <td scope="row"></td>
  <td scope="row">item 5</td>
  <td scope="row">item 6</td>
 </tr>
</tbody>
</table>
</body>
</html>

Article courtesy of .net magazine