In my HTML5 table, I have 3 header columns with a colspan of 2 each, making it a total of 6 columns wide. Below each header are 2 body columns corresponding to that header. While the individual columns are aligned left, I am now looking to center align the entire body so it lines up with the headers. Despite trying the margin: 0 auto trick with a defined width, it doesn't seem to be working as expected.
Here is how it appears currently:
This is my HTML:
<div id="areas">
<table>
<thead>
<tr>
<td colspan="2">Delaware County</td>
<td colspan="2">Main Line</td>
<td colspan="2">Chester County</td>
</tr>
</thead>
<tbody>
<tr>
<td class="city">Broomall</td>
<td class="zip">19008</td>
<td class="city">Ardmore</td>
<td class="zip">19003</td>
<td class="city">Paoli</td>
<td class="zip">19301</td>
</tr>
<tr>
<td class="city">Chester</td>
<td class="zip">19013</td>
<td class="city">Bala Cynwyd</td>
<td class="zip">19004</td>
<td class="city">Avondale</td>
<td class="zip">19311</td>
</tr>
<tr>
<td class="city">Aston</td>
<td class="zip">19014</td>
<td class="city">Bryn Mawr</td>
<td class="zip">19010</td>
<td class="city">Berwyn</td>
<td class="zip">19312</td>
</tr>
</tbody>
</table>
</div>
And here is my CSS:
#areas {
position: relative;
margin: 30px auto 60px auto;
width: 950px;
padding: 20px;
background-color: #4B004B;
-webkit-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
-moz-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
border: 3px outset gold;
}
#areas thead td {
font-family: 'electricalregular';
-webkit-text-stroke: 1px orange;
letter-spacing: 2px;
font-size: 10pt;
font-weight: 100;
text-align: center;
width: 316px;
color: gold;
padding: 0 0 15px 0;
}
#areas tbody {
width: 950px;
margin: 0 auto;
}
#areas tbody td {
font-family: 'CommunistSans';
color: gold;
font-weight: 100;
padding: 0 0 5px 0px;
width: 158px;
}
#areas .zip {
text-align: left;
}
#areas .city {
text-align: left;
}