I am trying to achieve a table like this, using mainly CSS to change the attributes:
http://www.further-flight.co.uk/sample_table.htm
My current effort looks like this:
http://www.further-flight.co.uk/meetups/join_us.php
I would like to remove the white lines within my table, pad the left handside so that the text moves away from the border slightly, add a 2px border between the red cell and the white and have the rows for National Hunt and Mixed in a pale grey colour, while leaving the flat row white. I have attempted these within my code, but haven't got the right result - could someone point me in the right direction, please?
HTML:
<table id="sample" cellspacing="2">
<tr class="toprow">
<td colspan="2">North West</td>
</tr>
<tr>
<td class="data1">National Hunt</td>
<td class="data1">Aintree, Carlisle, Cartmel</td>
</tr>
<tr>
<td class="leftcol">Flat & AW</td>
<td class="data">Chester</td>
</tr>
<tr>
<td class="data1">Mixed</td>
<td class="data1">Haydock Park</td>
</tr>
</table>CSS:
table#sample {
margin-left: 15px;
background-color:#FFFFFF;
border: solid #000 2px;
width: 600px;
}
table#sample td {
height: 20px;
}
.data1 {
color: #000000;
background-color: #e0e0e0;
text-align: left;
background-color: #FFFFFF;
}
.data {
color: #000000;
text-align: left;
background-color: #FFFFFF;
}
.toprow {
font-weight: bold;
text-align: left;
background-color: #ec2648;
border-bottom: solid #000 2px;
color: white;
}
.leftcol {
font-weight: bold;
text-align: left;
width: 100px;
background-color: #FFFFFF;
}