El modelo de tablas de HTML nos permite organizar datos (textos, texto preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc.) en filas y en columnas de celdas.
La implementación de sitios webs con estandares es un requisito fundamental para conseguir buenos niveles de accesibilidad y usabilidad. A las tablas se les ha echado la culpa de no cumplir con los estándares y fomentar un diseño web de “baja calidad”, pero nada más lejos de la realidad. El uso de tablas está totalmente recomendado, pero no para diseñar por completo una página web, en este caso siempre funcionará mucho mejor un diseño centrado en capas y con el uso de CSS. Las tablas deberán utilizarse únicamente para tabulación de información, mostrando una serie datos ordenados en filas y columnas.
Cada tabla puede tener un título asociado utilizando el elemento caption, que proporciona una descripción corta del propósito de de la tabla. Se puede proporcionar también una descripción más larga por medio del atributo summary, para el provecho de las personas que utilicen agentes de usuario basados en Braille o en voz.
<table
summary="Esta tabla da algunas estadísticas sobre la
economía del país... (bueno, no se me ocurre más, pero
podría seguir.)">
<caption>Una tabla de prueba con celdas varias</caption>
<tr><td>Contenido</td></tr>
</table>
Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo por medio de los elementos thead, tfoot y tbody, respectivamente. Los grupos de filas conllevan información estructural adicional y los agentes de usuario los pueden representar de modo que se enfatice esta estructura. Los agentes de usuario pueden sacar partido de la división entre encabezado, cuerpo y pie para permitir el desplazamiento de las secciones de cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablas largas, se puede repetir en cada página la información de cabecera y pie que contienen los datos de la tabla.
<table>
<thead>
<tr><th>filas para la cabecera de la tabla</th></tr>
</thead>
<tfoot>
<tr><td>filas para el pie de la tabla</td></tr>
</tfoot>
<tbody>
<tr><td>filas para el primer cuerpo de la tabla</td></tr>
</tbody>
<tbody>
<tr><td>filas para el segundo cuerpo de la tabla</td></tr>
</tbody>
</table>
Los autores también pueden agrupar columnas para proporcionar información estructural adicional de la que pueden sacar partido los agentes de usuario. Además de esto, los autores pueden declarar propiedades de columnas al comienzo de la definición de la tabla, por medio de los elementos colgroup y col, de tal modo que se permita a los agentes de usuario representar la tabla incrementalmente en lugar de tener que esperar a que lleguen todos los datos de la tabla antes de empezar a representarla.
<colgroup width="20">
<col span="39">
<col id="dame-un-formato-especial">
</colgroup>
Las celdas de la tabla puede contener o bien información de “encabezado” (representado por el elemento th) o de “datos” (elemento td). Dentro de la etiqueta th, se le puede añadir además el atributo abbr. Este atributo debería usarse para proporcionar una forma abreviada del contenido de la celda; los agentes de usuario pueden representar esta forma abreviada en lugar del contenido de la celda cuando sea apropiado.
<table>
<tr>
<th abbr="Tazas">Nº de tazas</th>
<th abbr="Tipo">Tipo de café</th>
<th abbr="Azúcar">¿Desea azúcar?</th>
</tr>
<tr>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</table>
Y por último, solo queda darle estilo a la tabla, siempre utilizando un archivo externo CSS. Y para ello te dejo el siguiente enlace, que tiene casi 100 ejemplos e estilos de tablas, para que compruebes todo lo que se puede hacer con ellas.
http://icant.co.uk/csstablegallery/index.php
Últimos comentarios