HTML, CSS and Tables: The Beauty of Data

HTML, CSS and Tables: The Beauty of Data: "Our CSS:

table {
border:1px solid #000;
border-collapse:collapse;
font-family:arial,sans-serif;
font-size:80%;
}
td,th{
border:1px solid #000;
border-collapse:collapse;
padding:5px;
}
#fn,#dp,#ar{width:58px;}
#fr,#to{width:138px;}
caption{
background:#ccc;
font-size:140%;
border:1px solid #000;
border-bottom:none;
padding:5px;
text-align:left;
}
thead th{
background:#9cf;
text-align:left;
}
tbody th{
text-align:left;
background:#69c;
}
tfoot td{
text-align:right;
font-weight:bold;
background:#369;
}
tbody td{
background:#999;
}
tbody tr.odd td{
background:#ccc;
}

However, to ensure that our lines meet, we need to set the cellspacing attribute in our HTML to 0, and cellspacing is a deprecated attribute for XHTML.

For XHTML documents we can use the border-collapse selector in the CSS to achieve the effect.

Lets take a look, shall we?

Our markup:

<table summary='This table lists all the flights by XYZ Air leaving London today.'>
<caption>Flight Schedule</caption>
<thead>
<tr>

<th id='fn' scope='col'>Flight Number:</th>
<th id='fr' scope='col'>From:</th>
<th id='to' scope='col'>To:</th>
<th id='dp' scope='col'>Departure:</th>
<th id='ar' scope='col'>Arrival:</th>
</tr>

</thead>
<tfoot>
<tr>
<td colspan='5'>Total: 3 flights</td>
</tr>

</tfoot>
<tbody>
<tr>
<th scope='row'>BA 3451</th>
<td>Heathrow</td>

<td>Nuremberg</td>
<td>19:20</td>
<td>19:50</td>
</tr>

<tr class='odd'>
<th scope='row'>BA 1254</th>
<td>Luton</td>
<td>Alicante</td>

<td>19:40</td>
<td>20:50</td>
</tr>
<tr>
<th scope='row'>LH 331</th>

<td>Heathrow</td>
<td>Hamburg</td>
<td>20:00</td>
<td>20:20</td>

</tr>
</tbody>
</table>"