Voy a poner un par de ejemplos de tablas, una normal y otra con las cabeceras fijadas. Y ejemplos de cómo las muestran los lectores de pantalla. Explicaré cómo crearlas con el bloque de WordPress para tablas y en HTML.
Quizá los datos que voy a usar no son los más adecuados para hacer la explicación pero no se me ocurría otra muestra sin duplicar alguna tabla de alguna entrada antigua. Así que para inspirarme he usado los datos que proporciona espaciocafe.com en la entrada ¿Qué capacidad tiene una taza de café? Tipos de tazas. La forma en que presentan Los datos en su web con el formato de lista es perfectamente válido y accesible, ya que únicamente son dos columnas de datos sin mucha complejidad y hay que tener en cuenta que el propio contexto los categoriza perfectamente.
- Tabla sin fijar las cabeceras
- Tabla con las cabeceras fijadas
- Estructurar una tabla usando el bloque de WordPress
- Estructura de la tabla en HTML
Tabla sin fijar las cabeceras
En este caso, al no estar las cabeceras fijadas, nos lee únicamente lo que hay en cada celda. Para una mayor comprensión tendríamos que usar más texto para poner en contexto los datos de todas las celdas, en la primera columna la palabra café y en la segunda columna no haría falta, porque ya tenemos la palabra ml incluida en la lista de ejemplo y queda claro que hace referencia a la cantidad de líquido que hay en la taza.
| Tipo de café | Capacidad |
| Espresso | 70-80 ml |
| Largo | 100-220 ml |
| Cortado | 120 ml |
| Late | 240-300 ml |
| Capuchino | 200-300 ml |
| Mugs | 250-500 ml |
| irlandés/frappé | 300-400 ml |
Tabla con las cabeceras fijadas
En esta tabla, al tener las cabeceras fijadas, cuando pasemos por las filas a partir de la segunda nos leerá siempre la superior y justo después la actual. Al hacerlas fijando la cabecera podemos ahorrarnos texto redundante ya que nos lo leerá siempre. Al estructurarlas con cabeceras fijas se facilita que los buscadores puedan saber de qué trata nuestra tabla, incluso pueden mostrarla en una vista previa antes de que hagan clic en el resultado de nuestra página.
| Tipo de café | Capacidad (en ml) |
|---|---|
| Espresso | 70-80 |
| Largo | 100-220 |
| Cortado | 120 |
| Late | 240-300 |
| Capuchino | 200-300 |
| Mugs | 250-500 |
| irlandés/frappé | 300-400 |
Añado un ejemplo de cómo lo leería el lector de pantalla para que veáis la diferencia aunque hay un pequeño problema, al tener un espacio entre la indicación de columna y el dígito de las medidas de después, el sintetizador de voz lo lee como un número añadiendo un dos por la posición de la columna, es decir en la taza de café largo en vez de leer: Capacidad (en ml) columna 2, 100-220 lo leería como Capacidad (en ml) columna 2100-220. Esto es cosa del propio sintetizador de voz, que da problemas en las tablas con datos numéricos con lo que no se puede hacer mucho. En las tablas con texto no se produce ese conflicto.
tabla con 8 filas y 2 columnas
fila 1 columna 1 Tipo de café
columna 2 Capacidad (en ml)
fila 2 Tipo de café columna 1 Espresso
Capacidad (en ml) columna 2 70-80
fila 3 Tipo de café columna 1 Largo
Capacidad (en ml) columna 2 100-220
fila 4 Tipo de café columna 1 Cortado
Capacidad (en ml) columna 2 120
fila 5 Tipo de café columna 1 Late
Capacidad (en ml) columna 2 240-300
fila 6 Tipo de café columna 1 Capuchino
Capacidad (en ml) columna 2 200-300
fila 7 Tipo de café columna 1 Mugs
Capacidad (en ml) columna 2 250-500
fila 8 Tipo de café columna 1 irlandés/frappé
Capacidad (en ml) columna 2 300-400
fuera de tabla
Estructurar una tabla usando el bloque de WordPress
Para insertar este bloque añadimos uno vacío y escribimos /tabla. Si no nos aparece seleccionado por defecto lo buscamos con las flechas. Puede aparecernos el de tabla de contenidos y al coincidir la primera palabra puede que nos aparezca como segunda opción. Una vez lo encontramos y pulsamos intro nos aparecerá un asistente para indicar la cantidad de columnas y filas que tendrá nuestra tabla. Para que quede insertada pulsamos sobre el botón de crear tabla. No os preocupéis si os quedáis cortos, o si os pasáis de optimistas con las celdas, siempre podréis solucionarlo desde el menú editar tabla, en él encontraréis las siguientes opciones:
- Insertar una fila antes
- Insertar una fila después
- Borrar la fila
- Insertar una columna antes
- Insertar una columna después
- Borrar la columna
Una vez nos ponemos a trabajar en la tabla que hemos creado nos saldrá un cuadro por cada una de las celdas. Si desplegamos los ajustes del bloque tendremos las siguientes opciones:
- Celdas de tabla de ancho fijo
- Sección de la cabecera
- Sección del pie de página
Si queremos que el lector de pantalla nos lea siempre la cabecera tendremos que marcar la opción Sección de la cabecera. Este bloque tiene un problema y es que para trabajar en tablas que tienen muchos datos por el momento no es viable hacerlo con lector de pantalla porque en ningún momento nos indica la posición de fila o columna en la que nos encontramos. Lo reporté hace unos meses y tomaron nota de la sugerencia pero por el momento, sólo contamos con estas indicaciones tan poco detalladas al añadir las celdas y únicamente nos dice en qué tipo de celda nos encontramos.
- Sección de la cabecera
- Texto de la celda del cuerpo
- Sección del pie
Podemos tomar como referencia las divisiones de cabecera y celdas del cuerpo de la propia tabla, pero en ningún momento sabremos en que posición estamos. Podemos crear la tabla base mediante el bloque y luego abrir el editor de HTML o crearla a mano y pegarla en el bloque HTML personalizado y quedará perfectamente estructurada. Si queréis más información podéis ver la ayuda oficial de WordPress del bloque de tabla.
Estructura de la tabla en HTML
Voy a poner el código tomando como ejemplo la segunda tabla en HTML (la que tiene los encabezados fijados). Insertaré algunos saltos de línea para que pueda leerse y entenderse de una forma más sencilla, explicaré después de todo el código la función que hace cada etiqueta.
<table>
<thead><tr><th>Tipo de café</th><th>Capacidad (en ml)</th></tr></thead>
<tbody><tr><td>Espresso</td><td>70-80</td></tr>
<tr><td>Largo</td><td>100-220</td></tr>
<tr><td>Cortado</td><td>120</td></tr>
<tr><td>Late</td><td>240-300</td></tr>
<tr><td>Capuchino</td><td>200-300</td></tr>
<tr><td>Mugs</td><td>250-500</td></tr>
<tr><td>irlandés/frappé</td><td>300-400</td></tr>
</tbody></table><table> todo lo escrito a partir de aquí formará parte de la tabla
<thead> indica un grupo de cabeceras
<tr> línea de tabla (table row)
Una vez definida la línea tenemos los siguientes tipos de celdas
<th> encabezados (table head) Todas las celdas que incluyan esta etiqueta se verán en negrita y centradas.
<tbody> agrupa el contenido del cuerpo de la tabla (esta etiqueta se cierra en la última celda del cuerpo)
<td> celda normal (Todas las celdas que tengan esta etiqueta se verán alineadas a la izquierda)
<tfoot> agrupación de pies de la tablaAñado un enlace con ejemplos de tablas a la W3CSchools aunque está en inglés, me gusta mucho porque explican para qué sirve cada etiqueta de forma detallada y además hay una sección en la que nos hacen unos ejercicios tipo examen para probar si entendemos bien qué etiqueta tenemos que añadir en cada lugar.
Proyecto para no aburrir 