table

index.html

    <section class="webdesigntuts-workshop">
    
<table>
  <thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Weight (kg)</th>
			<th>Profession</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Carolina Biggleswade</td>
			<td>23</td>
			<td>65</td>
			<td>Jockey</td>
		</tr>
		<tr>
			<td>Harry Sparrowhead</td>
			<td>34</td>
			<td>89</td>
			<td>Trainer</td>
		</tr>
		<tr>
			<td>Marjorie Doors</td>
			<td>32</td>
			<td>76</td>
			<td>Yard Manager</td>
		</tr>
		<tr>
			<td>Earnest Piggington-Smithe</td>
			<td>18</td>
			<td>98</td>
			<td>Groom</td>
		</tr>
	</tbody>
</table>
    
    </section><!--/ workshop-->

style.less

@color: #4C646B;

@import url('http://fonts.googleapis.com/css?family=PT+Sans|PT+Mono');
body {
 background: #292929; 
}

.webdesigntuts-workshop {
  table {
  	width: 50%;
		margin: 5% auto 0 auto;
		box-shadow: 0 0 30px rgba(0,0,0,.8);
	}
	thead tr{
		background: #4C646B;
		background: -webkit-linear-gradient(lighten(@color, 15%), @color);
		line-height: 2em;
		text-align: left;
		color: #f4f4f4;
	}
	thead th {
    font-family: "PT Sans", Arial, sans-serif;
		font-weight: normal;
		text-transform: uppercase;
		padding: 0 .5em 0 .5em;
		border-right: 1px solid rgba(255,255,255,.1);
		box-shadow: inset 0 0 4px rgba(0,0,0,.1);
	}
	thead th:first-of-type {
		border-top-left-radius: 4px;
	}
	thead th:last-of-type {
		border-top-right-radius: 4px;
		border-right: 0;
	}
	tbody {
		background: #f4f4f4;
	}
	tbody tr:nth-child(even) {
		background: #eaeaea;
	}
	tbody tr {
		transition: all .4s linear;
	}
	tbody tr:hover {
		background: rgba(255,226,36,.15);
		transition: all .4s linear;
	}
	td {
		padding: .5em;
		line-height: 1.5em;
		border-right: 1px solid #ccc;
		font-family: "PT Mono", monospace;
		color: #666;
	}
	td:last-of-type {
		border-right: 0;
	}
	tr td:nth-child(2), tr td:nth-child(3) {
		text-align: right;
	}
	tr {
		border-bottom: 1px solid #ccc;
	}

}