Tutorial de HTML - 4 - Creación de tablas

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Luego aprendimos a incorporar una lista y los encabezados, y después las imágenes. Ahora aprenderemos a colocar una tabla.
Para hacer un sitio accesible, que pueda ser leído e interpretado por no videntes que utilizan software lector de pantalla, es fundamental que no simplemente se vea prolija sino también que se escuche en forma prolija.
Mucha gente, al hacer su sitio web, quiere que su imagen aparezca a la derecha, entre el texto, o más arriba, más abajo, … y termina utilizando tablas para acomodarlo. Todos lo hicimos antes de saber qué es la accesibilidad.
Ahora sabemos que una tabla debe estar en un sitio sólo si los datos que la conforman son más claros organizados en filas y columnas que puestas como texto.
Habiendo aclarado cuándo deben utilizarse las tablas, paso a comentarles cómo es el código para crear una.
Si queremos realizar, por ejemplo, la siguiente tabla que contenga los resultados de un grupo de paises en el mundial:

Partidos y puntajes del grupo C

Equipo	Partidos	Triunfos	Empates	Derrotas	Puntos
Argentina	2	2	0	0	6
Países Bajos	2	2	0	0	6
Costa de Marfil	2	0	0	2	0
Serbia y Montenegro	2	0	0	2	0

Primero hay que anunciar dónde empieza y dónde termina la tabla, mediante los tags:

<table> aquí pondremos el contenido de la tabla </table>

Para comenzar es fundamental ofrecer un título a modo de resumen, de la siguiente manera:

<caption> Resumen de partidos y puntajes del grupo C</caption>

Luego, es necesario definir qué contenido se colocará en cada parte de la tabla. Comenzaremos cada fila (fila="row") con el tag <tr> y la terminaremos con </tr>

Para indicar cuáles serán los encabezados (encabezado="heading") de las columnas utilizaremos el tag <th> y </th>

<th> Equipo </th> <th> Partidos</th> <th>...

Es muy importante recordar que el contenido de la celda debe ser breve, en lo posible colocar términos abreviados, para que el lector de pantalla lo lea en forma coherente al recorrer la página fila por fila.

Luego continuaremos con el contenido de cada columna, utilizando <td> y </td>

El código completo quedaría así:

<table>
<caption> Resumen de partidos y puntajes del grupo C</caption>
<tr> <th> Equipo </th> <th> Partidos</th> <th> Triunfos</th> <th> Empates </th> <th> Derrotas </th> <th> Puntos </th>
</tr>
<tr>
<td>Argentina</td> <td> 2</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 6</td>
</tr>
<tr>
<td>Países Bajos</td> <td> 2</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 6</td>
</tr>
<tr>
<td>Costa de Marfil</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 2</td> <td> 0</td>
</tr>
<tr>
<td>Serbia y Montenegro</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 2</td> <td> 0</td>
</tr>

Pronto notaremos que nos gustaría agregarle un poco de estética a nuestra tabla, así que vamos a cambiar el primer renglón, quitando “TABLE” y reemplazando por:
<table border="1" cellpadding="2" cellspacing="1" summary="Lista de partidos ganados, empatados y perdidos, y resumen del puntaje de cada país">

Donde Border es el ancho del borde (cero para borde invisible), Cellspacing indica el número de pixeles (puntos en la pantalla) que separan cada celda (valor predeterminado: 2) y Cellpadding indica el número de píxeles entre el borde de la celda y su contenido (valor predeterminado: 1). Summary contiene un resumen para ser leído por los programas lectores de pantalla.
Podemos agregar en las celdas un atributo align que indique si el contenido de la celda estará alineado a la izquierda (left), centrado (center) o a la derecha (right).

<td align="center"> 2</td>

Existe la posibilidad de cambiar la posición del título (caption) utilizando align (top para arriba o bottom para abajo) y de combinar celdas mediante rowspan y colspan, pero no recomiendo su uso por no ser opciones muy accesibles.

Ejercicios para seguir practicando:
1) Realizar una tabla que contenga los días de la semana y la organización horaria.
2) Se puede probar de qué manera se oirá nuestra tabla con un lector de voz, utilizando alguna demostración gratuita, como las de este listado de lectores de pantalla

El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML