thead th {border-bottom: 1px solid #333; text-align: center; font-weight: bold;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="all">
body {margin: 2em 5%;}
table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0.25em 0.75em;}
thead th {border-bottom: 1px solid #333; text-align: center; font-weight: bold;}
tfoot th, tfoot td {border-top: 2px solid #666; color: #363;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th>#207-B34</th>
<td>$11,940</td>
<td>$12,348</td>
<td>$14,301</td>
<td>$17,208</td>
</tr>
<tr>
<th>#207-B35</th>
<td>$9,345</td>
<td>$9,834</td>
<td>$10,035</td>
<td>$9,672</td>
</tr>
<tr>
<th>#207-B36</th>
<td>$2,787</td>
<td>$3,123</td>
<td>$4,137</td>
<td>$3,711</td>
</tr>
<tr>
<th>#208-A07</th>
<td>$1,657</td>
<td>$3,003</td>
<td>$2,882</td>
<td>$2,690</td>
</tr>
<tr>
<th>#208-A11</th>
<td>$8,947</td>
<td>$7,249</td>
<td>$8,102</td>
<td>$7,821</td>
</tr>
<tr>
<th>#208-A12</th>
<td>$9,034</td>
<td>$11,027</td>
<td>$11,793</td>
<td>$10,283</td>
</tr>
<tr>
<th>#208-A13</th>
<td>$10,633</td>
<td>$12,574</td>
<td>$12,834</td>
<td>$11,568</td>
</tr>
<tr>
<th>#208-A23</th>
<td>$15,856</td>
<td>$16,239</td>
<td>$16,057</td>
<td>$15,712</td>
</tr>
<tr>
<th>#209-C17</th>
<td>$8,245</td>
<td>$6,929</td>
<td>$6,498</td>
<td>$5,016</td>
</tr>
<tr>
<th>#209-C55</th>
<td>$4,896</td>
<td>$4,869</td>
<td>$4,383</td>
<td>$6,808</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$83,340</td>
<td>$87,195</td>
<td>$91,022</td>
<td>$90,489</td>
</tr>
</tfoot>
</table>
</body>
</html>
Related examples in the same category