Cookie

It seems trivial, but there are certain aspects of computer, and therefore also of HTML that occasionally should be revisited. It should be noted that the W3C strongly recommend against using tables to design the layout of the site. The tables are used for data input, il layout si fa con i div.

Tables should not be used to define the content of the graphic because it could present problems for screen readers (but also for bots). More, when you used to define the graphic, tables may force users to scroll horizontally to view a table page designed for a larger screen. To minimize these problems, authors should use CSS to control the layout instead of tables.

Interestingly, the W3C never use the imperative (they should, should not…), they know that good manners.

Today we see some table article (to serve as a table and not as layout) and variations on them. They can draw their own conclusions.

The tag for the header: “th

The tag “th” It serves to define the table header: the first line and / or the first column. The simplest structure now fallen into disuse (without “th“) it's the following:

<table>  
  <tr>  
    <td>Auto</td>  
    <td>Type</td>  
    <td>displacement</td>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</table>

What will produce this result:

AutoTypedisplacement
OpelCorsa1.2
Citroenc21.1

For those not big eyesight it is easy to understand what we're talking, but who must rely on a screen reader for the interpretation of the web page, it would be significantly disadvantaged. This is why we introduced the tags “th“, stands for “table header“. This tag defines the table header and separates it from the table data (“td” – table data) and is used in this way:

<table>  
  <tr>  
    <th>Auto</th>  
    <th>Type</th>  
    <th>displacement</th>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</table>

That will generate this result:

AutoTypedisplacement
OpelCorsa1.2
Citroenc21.1

The tags for captions: “caption

Just like the photographs, Also for the tables there is a caption. È possibile mostrare la didascalia sopra o sotto la tabella, the CSS element that allows the positioning is “caption-side” and accepts as arguments “top” the “bottom“. However the tag “caption” it's not mandatory, depending on the circumstances it may be used or less.

If used should be placed immediately after the opening tag “table“.

<table>
  <caption>How many cars are parked in my garage?</caption>
  <tr>  
    <th>Auto</th>  
    <th>Type</th>  
    <th>displacement</th>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</table>

What will produce this result:

How many cars are parked in my garage?
AutoTypedisplacement
OpelCorsa1.2
Citroenc21.1

The attribute to summarize the contents of the table: “summary

In addition to the tag “caption” you can use the attribute “summary” (to bind to the tag “table“) to briefly explain the contents of the table. This option is not visible to the user who sees the table, serves to those who see not using a screen reader to understand right away if the table it can affect whether or not.

The right structure is as follows:

<table summary="Brand, model and engine capacity cars parked in my garage">
  <caption>Le auto del mio garage</caption>
  <tr>
    <th>Brand</th>
    <th>Type</th>
    <th>displacement</th>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</table>

The result of these lines of code with the style globally applied to this site is that:

How many cars are parked in my garage?
BrandTypedisplacement
OpelCorsa1.2
Citroenc21.1

It is important to point out that the attribute “summary” It is not visible to the eye of those who surf, It is nevertheless recorded as complementary information by bots and better indexes the table and is read by screen readers to help users with visual impairments.

Headers abbreviated with the attribute “abbr

The attribute “abbr” It is another optional attribute, if that is not put does not affect the structure or operation of the table. The content is read by screen readers to give a concise definition to those who have vision problems, that in this way it will avoid feeling headers with minor differences. The attribute “abbr” It is used in this way:

<table summary="Brand, model and engine capacity cars parked in my garage">
  <caption>Le macchine del mio garage</caption>
  <tr>
    <th abbr="Brand">The car brand</th>
    <th abbr="Type">The car model</th>
    <th abbr="displacement">The car engine</th>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</table>

Relate headers and data: “scope“, “id” and “headers

The tables are far enough banal views, This is how to make it clear to the screen reader the correlation between headers and data. We eliminate the header “Brand” This in our chart, and modify the entries for the brand so that they become a header.

<table summary="Brand, model and engine capacity cars parked in my garage">
  <caption>Le auto del mio garage?</caption>
  <tr>
    <td></td>
    <th>Type</th>
    <th>displacement</th>
  </tr>
  <tr>
    <th>Opel</th>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <th>Citroen</th>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</table>

And the result will be:

How many cars are parked in my garage?
Typedisplacement
OpelCorsa1.2
Citroenc21.1

We add the attribute “scope” to facilitate the work to the screen reader:

<table summary="Brand, model and engine capacity cars parked in my garage">
  <caption>Le auto del mio garage</caption>
  <tr>
    <td></td>
    <th scope="col">Type</th>
    <th scope="col">displacement</th>
  </tr>
  <tr>
    <th scope="row">Opel</th>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <th scope="row">Citroen</th>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</table>

The attribute scope definisce una cella di intestazione e fornisce informazioni di intestazione per una colonna o riga:

  • col: intestazione per la colonna
  • row: intestazione per la riga

Aggiungendo scope con il valore col alle intestazioni della prima riga andiamo a indicare che sono le intestazioni per le celle sotto elencate.

Viceversa usando row indicheremo che le intestazioni si riferiscono alle celle della riga corrispondente (a destra).

The attribute scope supporta anche altri due valori:

  • colgroup: intestazioni per il gruppo di colonne che la contiene
  • rowgroup: intestazioni per il gruppo di righe che la contiene

Per i gruppi di colonne si utilizza l’elemento colgroup, mentre per i gruppi di righe possiamo usare thead, tfoot and tbody (che vedremo più avanti).

Un’altra tecnica per collegare i dati di una cella con le appropriate intestazione è imputare ad ogni intestazione un id univoco, poi aggiungere l’attributo header a ogni dato. Questo attributo contiene una lista separata da spazi degli id di ogni cella di intestazione che si applica ai dati di quella cella. Questa tecnica è più complicata e dovrebbe essere utilizzata solo quando ci sono dati che debbano essere collegati a più di due celle di intestazione, quando l’attributo scope è insufficiente ad esempio in tabelle molto complesse o irregolari.

Per illustrare questo esempio ho modificato la tabella.

How many cars are parked in my garage?
Dati tecniciType
displacementAlimentazione
Opel1.2GPLCorsa
Citroen1.1Benzinac2

Chiaramente questo metodo diventa complicato piuttosto in fretta, meglio usare l’attributo scope quando possibile.

Gruppi di righe: thead, tfoot and tbody

Le righe della tabella possono essere raggruppate in intestazioni (thead), pié di pagina (tfoot) e uno o più corpi (tbody). Ovviamente ogni gruppo di righe deve contenere una o più righe della tabella.

Se una tabella contiene una instestazione (thead), deve apparire prima delle sezioni footer (tfoot) e body (tbody). Se decidiamo di non usare l’intestazione o il footer l’elementotbody it's not mandatory (ma neanche vietato, quindi lo usiamo a piacimento). La struttura della tabella con gruppi di righe somiglierà a questa:

<table>
   <thead>
      <tr></tr>
      … righe relative all'header
   </thead>
   <tfoot>
      <tr></tr>
      … righe relative al footer
   </tfoot>
   <tbody>
      <tr></tr>
      … righe relative al body
   </tbody>
   <tbody>
      <tr></tr>
      … righe relative al body della seconda tabella
   </tbody>
   … altre sezioni body se necessarie
</table>

Raggruppare le righe può essere vantaggioso per diverse ragioni:

  • semplifica applicare gli stili (CSS) delle sezioni thead, tfoot and tbody in modo indipendente, senza aggiungere classi o altro,
  • quando lanciamo la stampa di tabelle particolarmente lunghe alcuni browser (ad esempio quelli basati su gecko) ripetono l’informazione contenuta in thead and tfoot su ogni pagina stampata, rendendone più semplice la lettura,
  • separare le sezioni “header” and “footer” dal body della tabella rende possibile per i browser di visualizzare lo scrolling del solo body.

Quali benefici

Può sembrare un lavoraccio creare delle tabelle accessibili in HTML, e in effetti per le tabelle complesse lo è. A volte è impossibile poterle creare a mano. Per le tabelle più semplici, comunque usare le celle di intestazione con l’attributo scope è più veloce e semplice.

Pare ovvio che chi utilizza tecnologie assistive come ad esempio gli screen reader ottengano un beneficio assoluto dalle tabelle ottimizzate per l’accessibilità. Provare a dare un senso a una tabella di dati grande e complessa semplicemente ascoltando una voce sintetizzata può essere molto difficile o addirittura impossibile. Semplificare e renderle accessibili è un dovere.

Meno ovvio è il beneficio ottenuto dal designer e dall’utente medio, ma una tabella accessibile è piena di markup a cui poter applicare stili CSS. Una tabella accattivante e ben visualizzata può rendere la tabella più semplice da leggere per tutti.

Questo articolo è apparso per la prima volta in inglese nel 2004 ed è abbastanza impressionante il fatto che sia ancora attuale nonostante i suoi 14 years.

Not enough?


TheJoe

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.