Dunque, partiamo dal presupposto che tutte le informazioni riguardanti la visualizzazione sul browser devono essere delegate a CSS. Ciò significa che la struttura di markup deve rimanere pulita ed essenziale e deve svolgere il proprio lavoro: attribuire significato.
Quello che faremo sarà dunque agire in due fasi successive:
- preparare una struttura XHTML appropriata, che guardi cioè al significato e non alla presentazione;
- realizzare un foglio di stile per 'vestire' la struttura.
Fase 1/2: Strutturazione e organizzazione delle informazioni
Le tabelle sono uno strumento piuttosto affascinante e la loro costruzione richiede concentrazione e precisione. E' possibile addirittura abbracciare degli accorgimenti per renderle maggiormente accessibili. Vediamo un esempio:
codice:
<table summary="Gli iscritti al forum e i relativi dati">
<caption>Membri del forum</caption>
<thead>
<tr>
<th scope="col">Nome Utente</th>
<th scope="col">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>pierofix</td>
<td>pierofissore@virglio.it</td>
</tr>
<tr>
<td>AAA</td>
<td>aaa@bbb.com</td>
</tr>
</tbody>
</table>
Fase 2/2: Impaginazione
Nel CSS avrai istruzioni simili alle seguenti:
codice:
table
{
width:75%;
margin:auto; padding:5px;
border:1px solid #333;
}
/* e via dicendo */