Home arrow HTML arrow Page 3 - HTML, CSS and Tables: The Beauty of Data
HTML

HTML, CSS and Tables: The Beauty of Data


Assistive technology gags when it encounters HTML tables coded by the old school methods. Using the new coding lets you make tables more accessible to your users, and it really isn't that much harder--just remember what a table really is. Chris Heilmann reminds us, and gives an introduction to CSS.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 97
November 17, 2004
TABLE OF CONTENTS:
  1. · HTML, CSS and Tables: The Beauty of Data
  2. · What is a table?
  3. · W3C to the rescue
  4. · Summary needed
  5. · Styling tables: the days of the spacer GIF
  6. · Embracing CSS and separating "what is what" and "what it looks like"
  7. · Our CSS

print this article
SEARCH DEVARTICLES

HTML, CSS and Tables: The Beauty of Data - W3C to the rescue
(Page 3 of 7 )

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>

 


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials