Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
W three C to the rescue

To allow assistive technology to give users this kind of information, the W3C extended the original HTML table specification by adding some more structural elements and attributes: THEAD, TFOOT, TH, TBODY, CAPTION, summary, axis, headers and scope. Serialization of tables is a vast subject and covered in many extensive tutorials. Here's a quick introduction to how we can make our tables more accessible for users depending on assistive technology.

You start with table headers. These TH elements define a cell that gives information about the cells connected to it. In our case, these are the ones in the first row and the ones containing the flight number:

<table>
  <tr>
    <th>Flight Number:</th>
    <th>From:</th>
    <th>To:</th>
    <th>Departure:</th>
    <th>Arrival:</th>
  </tr>

  <tr>
    <th>BA 3451</th>
    <td>Heathrow</td>
    <td>Nuremberg</td>
    <td>19:20</td>
    <td>19:50</td>
  </tr>

  <tr>
    <th>BA 1254</th>
    <td>Luton</td>
    <td>Alicante</td>
    <td>19:40</td>
    <td>20:50</td>
  </tr>

  <tr>
    <th>LH 331</th>
    <td>Heathrow</td>
    <td>Hamburg</td>
    <td>20:00</td>
    <td>20:20</td>
  </tr>
</table>

To tell the data cells which header to connect to, we can use either the "scope" attribute on the header or an ID on the header and a "headers" attribute on the cells. The benefit of a scope is that it is a lot easier, the benefit of headers/ID pairs is that you can create more complex data tables. Scope can be either col for the column or row for the row the TH is in. The headers attribute describes the IDs the cell is connected as a space-separated list. An example using scope would be:

<table>
  <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>

  <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>

</table>

And the same table using headers/id:

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

  <tr>
    <th id="f1">BA 3451</th>
    <td headers="f1 fr">Heathrow</td>
    <td headers="f1 to">Nuremberg</td>

    <td headers="f1 de">19:20</td>
    <td headers="f1 ar">19:50</td>
  </tr>
  <tr>

    <th id="f2">BA 1254</th>
    <td headers="f2 fr">Luton</td>
    <td headers="f2 to">Alicante</td>

    <td headers="f2 de">19:40</td>
    <td headers="f2 ar">20:50</td>
  </tr>
  <tr>

    <th id="f3">LH 331</th>
    <td headers="f3 fr">Heathrow</td>
    <td headers="f3 to">Hamburg</td>

    <td headers="f3 de">20:00</td>
    <td headers="f3 ar">20:20</td>
  </tr>
</table>

 

Return to Listing

Website Designers R Us is a professional Internet strategy and Web design company based in Toronto, Canada. We specialize in best-in-class website design, online marketing, Flash multimedia, corporate identity and print graphics. Website Designers R Us features an integrated team of web consultants, creative designers, writers, programmers and marketing professionals that know how to get online results
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2011 Website Designers R Us, a DOT Specialist Company. All rights reserved.