Demo Table 2

by Jari Ullah

HTML

<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr></thead>
<tbody>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

CSS

table {
  font-family: 'Verdana';
  margin: 25px auto;
  border-collapse: separate;
border-spacing: 3px;
  border: 1px solid #eee;
  box-shadow:0px 0px 20px #808080;
text-align:center;
border-radius:10px;
}

td:hover {
  color: #555;
background: #f1f1f1;
text-decoration: underline;
}
th, td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
}
th {
  background: #228B22;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
border-radius: 5px;
}
tr, td {
transition: all 1s;
border-radius: 5px;
box-shadow: 3px 3px #808080;
}