Cal tenir en compte un seguit d'instruccions perquè aquestes taules siguin correctes i accessibles. Pot ser útil per comprendre les explicacions, la creació d'un calendari d'entrades d'articles, per exemple, en un bloc.
La identificació d'una taula es realitza mitjançant l'atribut summary de l'etiqueta <taula>. La utilització d'aquest atribut proporciona informació que es llegida pels lectors de pantalles.
Un resum de les relacions entre les cel·les és especialment important per a les taules amb encapçalaments niats, cel·les que ocupen diverses columnes o files, o altres relacions que no siguin evidents en un anàlisi de l'estructura de l taula, però que sí s'aprecien quan la taula es mostra visualment. Un resum pot descriure com una taula s'inclou en el context del document actual.
Cal donar un títol o subtítol real a la taula mitjançant l'etiqueta <caption>. En moltes ocasions es pot observar que el títol de la taula s'introdueix, erròniament, en una cel·la de la taula a la que se li assigna un seguit d'atributs per donar format al text. El codi font erroni s'assemblaria al següent:
Incorrecte:
<table>
<tr>
<td colspan="7">Calendari d'articles</td>
<tr>
<td align="center">Lu</td>
<!-- ... -->
El que cal fer es substituir la primera línia <tr> que conté el "fals" títol per un altre línia que contingui l'etiqueta <caption>.
Correcte:
<table summary="Calendari mensual amb enllaços als diferents
articles diaris del bloc.">
<caption>Calendari d'articles del bloc</caption>
</table>
D'aquesta manera els programes lectors de pantalla i alguns navegadors textuals com el Lynx, mostraran el títol real de la taula com a tal, informant alhora a l'usuari que no es tracta d'una dada més de la taula.
Si no es proporciona un títol mitjançant l'etiqueta <caption>, es pot utilitzar l'atribut title de l'element <table> per descriure la naturalesa de la taula en poques paraules.
<table summary="Calendari mensual amb enllaços als diferents articles diaris del bloc." title="Calendari d'articles del bloc"> </table>
<thead> ... </thead>Per a que la taula sigui accessible cal utilitzar encapçalaments apropiats. Això s'aconsegueix utilitzant l'etiqueta <th>, en lloc de l'etiqueta <td>, on calgui. Primer de tot cal tenir clar quins són els encapçalaments de la taula. Seguint amb l'exemple anterior, en el cas mensual del calendari, està clar que els encapçalaments seran els noms dels dies de la setmana, que estan en la primera línia de dades. Estenem una mica més el codi que s'ha estat usant, una taula correctament etiquetada seria de la següent manera:
<table summary="Calendari mensual amb enllaços als articles
diaris del bloc." title="Calendari d'articles del bloc">
<caption>Calendari d'articles del bloc</caption>
<thead>
<tr>
<th colspan="8">Octubre 2007</th>
</tr>
</thead>
</table>
S'ha utilitzat l'etiqueta <th> i no s'ha posat cap tipus d'alineació ja que, per defecte, aquesta etiqueta determina l'alineació centrada i el text en negreta. Però, per altra banda, si es vol proporcionar alguna característica d'estil s'haurà de declarar al full d'estils CSS. Fixeu-vos en l'atribut colspan de l'etiqueta <th> de la taula, se li ha donat el valor de 8, ja que és el nombre de columnes en que s'estendrà la taula.
<tfoot> ... </tfoot>)Es pot afegir a la taula un peu, que en aquest cas recollirà el nombre total d'articles del mes en curs. L'etiqueta <tfoot> ... </tfoot> se situarà entre les etiquetes <thead> ... </thead> i <tbody> ... </tbody>, per tal que qualsevol navegador, lineal o no, llegeixi el peu de la taula abans que tot el cos, ja que aquest potser molt llarg i complex.
Per diferenciar la capçalera del <tfoot>, de la del <thead>, o de la del <tbody>, li afegirem un identificador de classe; d'aquesta manera aconseguirem donar-li un format i una aparença diferent a la de la resta de capçaleres.
<table summary="Calendari mensual amb enllaços als articles
diaris del bloc." title="Calendari d'articles del bloc">
<caption>Calendari d'articles del bloc</caption>
<thead>
<tr>
<th colspan="8">Octubre 2007</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="foot" colspan="7">
Nombre total d'articles:</td>
<td class="foottotal">8</td>
</tr>
</tfoot>
</table>
<tbody> ... </tbody> Un cop s'han definit l'encapçalament i el peu de la taula, procedireu a establir i estructurar-ne el cos; determinant les files, capçaleres de taules i cadascuna de les cel·les.
<table summary="Calendari mensual amb enllaços als articles
diaris del bloc." title="Calendari d'articles del bloc">
<caption>Calendari d'articles del bloc</caption>
<thead>
<tr>
<th colspan="8">Octubre 2007</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="foot" colspan="7">
Nombre total d'articles:</td>
<td class="foottotal">8</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Setmana</th>
<th>dilluns</th>
<th>dimarts</th>
<th>dimecres</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<th>primera</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<th>segona</th>
<td>8</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Ara cal que comenceu a crear el vostre calendari d'entrades d'articles. Per fer-ho cal que apliqueu els coneixements adquirits en aquesta pràctica i en els mòduls anteriors.
Heu d'obtenir una taula semblant a:
Exemple de taula: calendari amb events
