HTML, CSS and Tables: The Beauty of Data

A fully accessible table also needs a summary. Furthermore it is helpful to add a caption and structure the table into a THEAD and TBODY and TFOOT:

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

       <th scope="col">Flight Number:</th> 
      <th scope="col">From:</th> 
      <th scope="col">To:</th> 
      <th scope="col">Departure:</th> 
      <th 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>
    <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>

The browser does not render all of these attributes, though:

Notice that TFOOT must appear immediately after THEAD and before the first TBODY.

Now that we have the HTML skeleton, let's paint it and turn it into something like this: