Demo Table 4

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 {
	border-collapse: seprate;
        border-spacing: 5px;
	line-height: 24px;
	margin: 30px auto;
        font-family: helvetica;
        text-align: center;
}	

th {
	background-image: linear-gradient(#777, #444);
	color: #fff;
        font-weight: bold;
	padding: 10px 30px;	
}

th, tr td {
border-radius: 50px;
}
td {
	padding: 10px 15px;
	position: relative;
	transition: all 300ms;
}	

tr:nth-child(odd) td {
	background: #f1f1f1;	
}

tr:nth-child(even) td {
	background: #d3d3d3;	
}	

tbody:hover td {
	color: transparent;
	text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
	color: #000;
	text-shadow: 0 1px 0 #fff;
}