Introducción
En un mundo en el que el CSS ha ganado la batalla a las tablas como técnica de diseño, en un mundo en el que la semántica se ha antepuesto al diseño aparecen tablas semánticas, un concepto que apesar de ser lo más normal y obvio del mundo mucha gente desconoce.
Antes de seguir, hay que comentar que son las tablas y para que se han de usar. Lamentablemente mientras navegas por internet te encuentas páginas que en apariencia son bonitas pero al mirar el código sientes unas nauseas tan profundas que recuerdas aquellas papillas que te dieron cuando eras un enano. Generalmente esto no es culpa del desarrollador que como todo en esta vida se deja corruptar y sucumbe a las demandas del cliente… su estomago.
Entre estas aberraciones te encuentras de todo, pero quizas lo más sangrante sean los diseños basados en tablas…tablas anidadas y demás engendros que hacen que las úlceras de cualquiera sangren. Diseños en los que una tabla gigante engloba a centenares de tablas menores que a su vez engloban otras y así infinitamente.
Apesar de estos usos denigrantes las tablas deben existir. ¿Por que? Por que tienen una utilidad definida, tabular datos. El usar <div />, <span />, o cualquier otro tag para tabular datos lo considero (ojo, opinión personal) la misma aberración que usar tablas para maquetar. Cada cosa se ha de usar para lo que se ha de usar… he ahi la primera ley de la web semántica.
Apesar de servir para tabular datos las tablas del pleistoceno siguen siendo poco semánticas y por consecuente poco útiles en el nuevo mundo de la maquetación web. Para solventar este problema la mejor y más óptima forma de hacerlo es conocer los tags que podemos usar con las tablas y aprender cuando es el mejor momento para usarlos.
Simulación práctica
Intentemos imaginar que somos un robot, no uno como bender, sinó uno que trabaja para cualquiera de los buscadores web que ahora mismo están preparando una nueva revisión a la lectura de datos, adaptándose a las exigencias de la web semántica. Imaginemos tambien que llegamos a una página y nos encontramos algo así.
<table width="100%" border="0">
<tr>
<td> Contenido realmente interesante que el usuario puede necesitar.</td>
</tr>
</table>
Si somos un robot listo, probablemente nos saltaremos los tags he iremos directamente al texto, esto solo demostraría que somos demasiados listos, por que estamos obviando tags que pueden contener datos importantes para el contenido, se trata del contexto del contenido. Este contexto debe ser tratado por ese motivo un robot no debe olvidar que lee texto.
Entonces, ¿que hemos leido al entrar en la página? Tabla de 100% y borde 1 tiene un TR y un TD.. parece alemán…. y no lo vas a entender ni leyendoló varias veces. Si el desarrollador te hubiera ayudado a entender lo que estabas leyendo quizas ahora podrías conocer el alemán de una forma fluida y podrías, quien sabe,… ligarte alguna por aqui en la playa… 😀
Por el bien del robot, y de su vida sexual, debemos plantearnos el hacer las cosas bien. Esto al final nos reportará mejores resultados a la hora de indexar nuestro sitios y en un futuro los usuarios de estos buscadores obtendrán resultados más exactos gracias al granito de arena que podemos ir colocando cada uno de nosotros.
Tablas semánticas
Tags
<caption>
Este tag nos ayudará a indicar el nombre de la tabla que estamos implementado, aportando información acerca del contenido de la tabla.
<table>
<caption>Nombre de la tabla</caption>
<tr>
<td>DATOS 1</td>
</tr>
<tr>
<td>DATOS 2</td>
</tr>
</table>
<th>
Nos indica que se trata de un encabezado, y debemos indicar mediante el atributo scope el tipo de encabezado del que se trata, siendo posible usar col (Columna) o row (Fila).
<table>
<caption>Nombre de la tabla</caption>
<tr>
<th scope="col">COLUMNA 1</th>
</tr>
<tr>
<td>DATOS 1</td>
<td>DATOS 2</td>
</tr>
</table>
<thead>
Este tago nos ayudará a mejorar la estrutura de nuestra página e indicaremos que fila ha de ser tratada como el encabezado de la tabla. Similar a <th>; pero orientado a toda la fila.
<table>
<caption>Nombre de la tabla</caption>
<thead>
<tr>
<th scope="col">COLUMNA 1</th>
<th scope="col">COLUMNA 2</th>
</tr>
</thead>
...
</table>
<tfoot>
Al igual que <thead> nos ayuda a indicar que esta fila corresponde al pié de la página. Curiosamente se ha de escribir antes del <tbody> ¿alguien sabe por que?.
<table>
<caption>Nombre de la tabla</caption>
<thead>
<tr>
<th scope="col">COLUMNA 1</th>
<th scope="col">COLUMNA 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">PIE 1</th>
<th scope="col">PIE 2</th>
</tr>
</tfoot>
<tbody>
....
</tbody>
</table>
<tbody>
Este tag nos indica el contenido de toda la tabla y nos aporta la información de que en su interior se encuentran los datos tabulados.
<table>
<caption>Nombre de la tabla</caption>
....
<tbody>
<tr>
<td>DATOS 1</td>
<td>DATOS 2</td>
</tr>
<tr>
<td>DATOS 3</td>
<td>DATOS 4</td>
</tr>
</tbody>
</table>
<colgroup> y <col>
Se encargan de crear un grupo de columnas, este grupo puede ser especificado de dos formas, mediante el atributo span que especifica el número de columnas, o mediante el tag <col> para cada columna en concreto.
<col> se encarga de especificar atributos a una columna detérminada.
<colgroup span="40" width="20">
</colgroup>
<colgroup>
<col width="20">
<col width="20">
...un total de cuarenta elementos COL...
</colgroup>
Atributos
scope="col|row"
Este atributo ha sido el elegido para indicar los tipos de datos que representan las celdas de una tabla pudiendo ser columna (col) o fila(row).
<table>
<tr>
<th scope="col">Food</th>
<th scope="col">Calories</th>
<th scope="col">Fat</th>
<th scope="col">Carbs</th>
<th scope="col">Protein</th>
</tr>
<tr>
<td scope="row">McDonald's Big Mac</td>
<td>600</td>
<td>33</td>
<td>50</td>
<td>25</td>
</tr>
...
</table>
colspan y rowspan
Son los encargados de definir el tamaño de una celda. Funcionan indicando el número de celdas que van a usar. Si indicamos que una celda tiene un rowspan de 2 estaremos indicando que se trata de una celda que va a ocupar 2 celdas dentro de esa fila.
<table>
<caption>Nombre de la tabla</caption>
<tr>
<td colspan="2">2 columnas</td>
</tr>
<tr>
<td rowspan="2">2 Filas</td>
<td>Fila</td>
</tr>
</table>
sumary
Este atributo nos ayuda a indicar información no visual a los navegadores acerca de los datos indexados a continuación.
<table sumary = "Resumen del contenido de una tabla">
headers
Este atributo especifica un listado de cabeceras para las celdas, de esta forma podemos sobrecargar de información cada celda con contenido no visual que los lectores de pantalla (nuestro querído robot) podrá interpretar mejor.
<table>
<tr>
<th id="food">Food</th>
<th id="calories">Calories</th>
<th id="fat">Fat</th>
<th id="carbs">Carbs</th>
<th id="protein">Protein</th>
</tr>
<tr>
<td id="wendys">Wendy's Big Bacon Classic</td>
<td headers="calories wendys">580</td>
<td headers="fat wendys">29</td>
<td headers="carbs wendys">45</td>
<td headers="protein wendys">33</td>
</tr>
<tr>
<td id="bun1" headers="wendys">bun</td>
<td headers="calories bun1 wendys">200</td>
<td headers="fat bun1 wendys">2.5</td>
<td headers="carbs bun1 wendys">38</td>
<td headers="protein bun1 wendys">7</td>
</tr>
...
</table>
Diseño de tablas
Creo que no hace falta decir que todo el diseño de las tablas debén siempre estár definidos en nuestros CSS, de esta manera podremos modificar el aspecto siempre que nos apetezca sin tener que modificar la estructura de nuestro HTML. El atributo border… daña la vista 😀
El futuro de las tablas
Aún es un poco pronto para hablar del futuro de las tablas, pero lo que está claro es que seguirán ahi y tendremos que vivir con ellas. Nuevos tags, nuevos atributos nos ayudarán a hacerlas cada vez más semánticamente correctas y poder facilitar el trabajo a nuestros amigos los robots dando unos resultados más fiables.
Información
