Hace mucho tiempo que ya no usamos tablas para hacer un layout. Nunca debe hacerse un layout en tablas, eso implica mucho código que no significa nada, para eso debemos escribir html estructural y crear nuestros diseño con CSS. Pero, las tablas todavía tienen uso, cuando queremos mostrar data tabular en filas y columnas.
Los ejemplos donde las tablas son recomendadas incluyen calendarios, horarios, resultados de exámenes, resultados médicos, yo para este ejemplo voy a utilizar una tabla de posiciones de los equipos en la división este de la liga americana. La tabla de ejemplo.
Las tablas tienen el codigo HTML mas interesante, asi que los resultados dependerán de que nivel de complejidad sea requerido.
Estructura de las tablas
Utilizo <thead><tfoot> y <tbody> porque estos tags permiten que podamos agrupar las filas de la tabla en grupos de secciones: header, footer y body.
Aunque con la excepción del thead, no hay diferencia visual entre una tabla que tenga estos elementos y una que no los tenga, pero siempre es bueno incluirlos porque proveen valiosa información extra sobre la estructura de la tabla, que puede ser usada para mostrarla en impresión o en la pantalla.
Diseñando
A esta tabla le añadimos una clase a las filas impares, para aplicarles una imagen de fondo. Este truco se puede lograr con javascript fácilmente, evitándonos aplicarle una clase a cada fila impar.
Con jQuery, seleccionar filas impares o pares es muy directo:
$("table tbody tr:odd").addClass("impar");
con un poco de color, padding y algunos bordes tenemos una tabla asi.
Para inspiración de diseños de tablas, vale la pena visitar http://icant.co.uk/csstablegallery/, es un website al estilo Zen-Garden donde una misma tabla es rediseñada por hojas de estilos enviadas por los usuarios.
Columnas
el elemento <colwrap> y el elemento <col> permiten aplicar algunos estilos a una columna individual en una tabla. Voy a ponerle un fondo de un color mas oscuro a la columna de juegos ganados. Ejemplo final.
