HTML, CSS and Tables: The Beauty of Data - Summary needed

(Page 4 of 7 )

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:

Flight Schedule

Flight Number:	From:	To:	Departure:	Arrival:
Total: 3 flights
BA 3451	Heathrow	Nuremberg	19:20	19:50
BA 1254	Luton	Alicante	19:40	20:50
LH 331	Heathrow	Hamburg	20:00	20:20

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:

Next: Styling tables: the days of the spacer GIF >>
 

More HTML Articles
More By Chris Heilmann

Comments On: HTML, CSS and tables - the beauty of data

· The article is only the start. I hope some of you might be tempted to go on...   >>> Post your comment now!