Ruta URL

http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

33.1. Estructura de las tablas

Antes de centrarnos en el CSS, fijmonos en los elementos estructurales bsicos de las tablas a las que deberis aplicar estilos:

Encabezamientos de las tablas. Celdas de datos de las tablas. Ttulos de las tablas.

Cuando los usuarios de vuestro sitio lean vuestra tabla, deberan poder entender y seguir fcilmente su estructura. La manera ms sencilla de conseguirlo es utilizar bordes, colores de fondo o ambos. No es necesario que sigis estas convenciones estilsticas, pero s deberais garantizar que existe una diferencia clara entre las celdas th y td; adems, el caption (ttulo) debera estar asociado claramente con la tabla y diferenciado del resto del texto de la pgina.

33.2. Conceptos bsicos

Fijaos en cmo se representa esta tabla sin estilo: Recent Major Volcanic Eruptions in the Pacific Northwest Volcano Name Location Last Major Eruption Type of Eruption

Compiled in 2008 by Ms Jen Mt. Lassen Mt. Hood Mt. St. Helens
Ved tambin Podis ver el mismo ejemplo en el apartado 19 del mdulo "El texto central de HTML".

California Oregon Washington

1914-17 1790s 1980

Explosive Eruption Pyroclastic flows and Mudflows Explosive Eruption

Los datos son comprensibles, pero hay que esforzarse un poco para ver cmo va todo. Aadmosle unos estilos para hacer que sea ms fcil de leer.

33.2.1. Anchura de tabla y de celda

La primera decisin que hay que tomar es qu anchura debe tener la tabla. La opcin por defecto del navegador es la misma que establecer table {width: auto; }, que da

como resultado que la tabla se extienda a lo ancho del contenido. Esto, en general, queda desordenado. Pongamos por caso que nuestra tabla debe ir en una columna de contenido de 600 pxeles de anchura. Especificamos que la tabla se ample hasta el 100% de la anchura disponible para aprovechar mejor el espacio. Como hay cuatro columnas, establezcamos tambin la anchura de las celdas de tabla en un 25% cada una.
table { width: 100%; } th, td { width: 25%; }

De hecho, podis limitaros a establecer la anchura para th y esto definir la anchura de todas las columnas; aun as, siempre va bien ser riguroso. Este estilo tan sencillo dar el resultado que se ve en la figura 1:

Figura 1. La tabla de ejemplo con una configuracin sencilla de anchura

Ahora las celdas quedan con una anchura igualada. Ms adelante ya veremos cmo especificar anchos desiguales, pero de momento seguimos con el siguiente paso.

33.2.2. Alineacin del texto

La tabla an es un poco confusa de leer, de manera que vamos a especificar que la alineacin del texto sea un poco ms clara. La norma adicional que se muestra a continuacin alinear a la izquierda los encabezamientos para que encajen con el contenido (por defecto, los navegadores centran los ttulos de las tablas):
table { width: 100%; } th, td { width: 25%; text-align: left; }

As se clarifica un poco la tabla, como se puede ver en la figura 2:

Figura 2. Tabla con alineacin a la izquierda

Ahora mismo, todas las celdas estn alineadas verticalmente en el centro. Si lo prefers, podis definir que el texto se alinee en la parte superior o inferior de la celda, o cualquier posicin de vertical-align que queris. Las siguientes reglas establecen que el texto se alinee en la parte superior.
table { width: 100%; } th, td { width: 25%; text-align: left; vertical-align: top; }

Ahora la tabla queda como se ve en la figura 3:

Figura 3. La tabla con alineacin vertical

Fijaos en cmo todos los ttulos de la fila superior quedan tocando arriba aunque "Last Major Eruption" queda en dos lneas.

33.2.3. Bordes
La tabla ya queda un poco mejor, pero an cuesta un poco leer cada lnea. Ahora aplicaremos algunos bordes para hacer que todo sea ms fcil de leer. Debis establecer los bordes de manera independiente para cada parte de la tabla y despus decidir cmo se deberan combinar. Para mostraros dnde quedarn los bordes, la figura 4 muestra diferentes bordes para table (solid black, negro slido), caption (solid grey, gris slido), th (dashed blue, lnea discontinua azul) y td(dotted red, lnea de puntos roja):

Figura 4. Muestra de los diferentes bordes en una tabla

Fijaos en cmo el borde de la table recorre el contorno exterior de todas las celdas de encabezamiento y de datos y despus pasa entre las celdas y el ttulo de la tabla. Tambin podis ver que, por defecto, los bordes th y td se distancian un poco el uno del otro. Pasemos ahora a otro estilo de tabla. Podis crear un borde negro sencillo para la tabla y las celdas mediante la propiedad border (borde). Esto se hace con las reglas siguientes:
table { width: 100%; border: 1px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; }

y da como resultado lo que se muestra en la figura 4b:

Figura 4b. Tabla con bordes negros sencillos

Esto provoca que las filas sean ms fciles de leer, pero puede que no os guste el espacio que queda entre las celdas. Hay dos maneras de cambiarlo. Primero, podis limitaros a cerrar los huecos utilizando la propiedad borderspacing (espaciado de bordes), por ejemplo as:
table { width: 100%; border: 1px solid #000; }

th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-spacing: 0; }

De esta manera, los bordes se tocarn en lugar de quedar separados. As se cambia el borde de 1 pxel por un borde de 2 pxeles, como se ve en la figura 5:

Figura 5. Tabla sin espaciado entre bordes que produce un efecto de borde de 2 pxeles.

Tambin podis aumentar el espacio entre las celdas utilizando border-spacing, aunque hay que tener en cuenta que esta propiedad no funciona con Internet Explorer. Si queris mantener el efecto de borde de 1 pxel, necesitaris definir la tabla de manera que los bordes se "colapsen" los unos sobre los otros. Podis conseguirlo utilizando la propiedad border-collapse(superposicin de bordes) en lugar de la de borderspacing (espaciado de bordes):
table { width: 100%; border: 1px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; }

De esta manera, obtendris una tabla con un borde de 1 pxel como se observa en la figura 6:

Figura 6. Tabla con border-collapse (superposicin de bordes) definido para superponerse y as reducir el borde en 1 pxel

Cuando definis que los bordes se superpongan, debis tener en cuenta que esto os puede causar problemas si tenis estilos de bordes diferentes aplicados a celdas adyacentes. Cuando los estilos de bordes diferentes se superponen unos sobre otros, entrarn en "conflicto" entre ellos. Esto se soluciona mediante las reglas de resolucin de conflictos de bordes de tabla de la especificacin de CSS2 del W3C, que determinan qu estilo "gana" cuando se superponen.

33.2.4. Relleno
Ahora que ya habis aplicado bordes en las celdas, puede que queris aadir un poco de espacio en blanco a las celdas del ttulo y de la tabla. Para hacerlo, slo debis utilizar el padding (relleno).
table { width: 100%; border: 1px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; padding: 0.3em; } caption { padding: 0.3em; }

Esto hace que el texto "respire" un poco, como se ve en la figura 7:

Figura 7. Tabla con relleno aplicado a todas las celdas

33.2.5. Colocacin del caption

Hasta ahora, el caption ha estado siempre en la parte superior de la tabla. Sin embargo, puede que queris moverlo a otro lugar. Por desgracia, en IE no se puede hacer, pero en todos los dems navegadores podis cambiar la posicin del caption utilizando la propiedad caption-side (lado del ttulo). Las opciones posibles son: top (superior), bottom (inferior), left (izquierda) y right (derecha). Ahora lo pondremos en la parte inferior:
table { width: 100%;

border: 1px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; padding: 0.3em; caption-side: bottom; } caption { padding: 0.3em; }

En la figura 8 se muestra el resultado:

Figura 8. Tabla con el caption movido a la parte inferior

Si queris cambiar la posicin del caption, recordad que ningn estilo especfico de lado funcionar con IE. Por ejemplo, si queris aadir tres bordes para hacer que el ttulo "se una" a la parte inferior de la tabla, en IE no quedar as porque el ttulo seguir estando en la parte superior. Deberis utilizar comentarios condicionales para reaplicar el estilo a la tabla para IE.
Ved tambin Para saber ms, podis ver tambin el subapartado 33.2.7.

Para el resto de ejemplos, dejaremos el caption en la parte superior.

33.2.6. Fondo
Otra manera muy sencilla de aplicar estilos a las tablas es aadir colores e imgenes de fondo. Esto se hace con la propiedad background (fondo), aunque debis tener presente que las diferentes partes de la tabla actuarn como "capas" una encima de la otra. La especificacin CSS2 explica los efectos de capas de fondo bastante detalladamente, pero en pocas palabras: los fondos se taparn los unos a los otros en este orden: 1. tabla (que queda "al fondo del todo" o "detrs de todo"), 2. grupos de columnas, 3. columnas,

4. grupos de filas, 5. filas, 6. celdas (por "encima" o "delante" de todo, es decir, que su fondo tapa a todos los dems). Por lo tanto, si establecis un fondo para la tabla y un color diferente para las celdas, el fondo de la celda tapar el fondo de la tabla. Si habis establecido los bordes en collapse (superposicin), el fondo de la tabla no se ver. No obstante, si habis establecido border-collapse en separate, el fondo de la tabla se ver entre los bordes. Nota Fijaos en que el concepto de elementos diferentes uno encima del otro en la pgina es controlable; podis controlar a qu altura de la "pila" queda un elemento en relacin con los dems cambiando su propiedad z-index.
Ved tambin En el apartado 37 de este mdulo aprenderis ms cosas sobre z-index.

Imaginaos que defins la tabla de manera que tenga un fondo rojo y las celdas con fondo blanco. Entre la separacin de las celdas se ve el rojo, pero las celdas siguen siendo blancas, como se muestra en la figura 9:

Figura 9. Tabla que demuestra cmo el elemento de fondo de tabla rojo se ve entre los fondos blancos de las celdas.

Tambin podis utilizar una imagen de fondo. Por ejemplo, si queris tener una gradacin que se vea entre las celdas, podrais definir th y td con fondos blancos, pero establecer el fondo de table con una gradacin de colores:
table { border-collapse: separate; border-spacing: 5px; background: #000 url("gradient.gif") bottom left repeat-x; color: #fff; } td, th { background: #fff; color: #000; }

Fijaos en que el color de fondo se establece en negro, que llena el espacio en la parte superior donde acaba la gradacin cromtica (siempre debis tener en cuenta que la

tabla puede ser ms alta que la imagen de fondo). El color de delante del todo se establece en blanco por si en algn momento estos colores por defecto se ven a travs del contenido de las celdas. En general, los estilos de las celdas cancelarn la configuracin del color del texto del estilo de table {}, pero siempre se deberan definir colores de fondo y de primer plano que hagan contraste. Estos estilos crean una tabla que quedara como en la figura 10 en la mayora de los navegadores.

Figura 10. Tabla con una imagen de fondo con gradacin de colores que se ve entre las celdas

Por defecto, con IE no se ver tanto el fondo porque no reconoce border-spacing. Sin embargo, se consigue el mismo efecto, tal como se observa en la figura 11:

Figura 11. IE proporciona menos espacio entre bordes.

Dependiendo de las circunstancias, puede que os conformis con esta diferencia de representacin entre navegadores. Pero, lgicamente, eso no siempre es posible, por ejemplo cuando un cliente especifica que quiere que un diseo quede exactamente igual en todos los navegadores.

33.2.7. Arreglar el IE con estilos condicionales

Existe una manera de solucionar los problemas de IE que hemos mencionado antes. Hay que hurgar un poco y requiere una hoja de estilo extra, pero funciona. Podis utilizar una expression para hacer el espacio ms ancho y despus cargar esta expresin mediante comentarios condicionales. La sintaxis de la expresin es sta:
table { border-collapse: expression("separate", cellSpacing = "5px"); }

Este CSS slo sirve para IE, de manera que slo ste lo debe poder aplicar. La expresin tambin invalidar la hoja de estilo, de manera que los desarrolladores prefieren aislar las manipulaciones de IE en una hoja de estilo aparte que slo cargue IE. Para hacerlo, cread una hoja de estilo nuevo que se llame ie-only.css ("slo IE") y enlazadla dentro de comentarios condicionales:
<!--[if lte IE 7]><link rel="stylesheet" media="screen" href="ie-only.css" /> <![endif]-->

Fijaos en que [if lte IE 7] significa "si menos que o igual a la versin 7 de IE". Esto revela el cdigo en IE 7 y en todas las versiones anteriores de IE, pero el comentario de HTML que lo rodea oculta el cdigo a todos los dems navegadores. Podis ajustarlo a cualquier versin de IE que necesitis, por ejemplo, si se trata de la versin IE6 y anteriores, utilizad: [if lte IE 6]. En vuestra hoja de estilo principal, estableced el estilo normal:
table { border: 1px solid #000; border-collapse: separate; border-spacing: 5px; background: #000 url("gradient.gif") bottom left repeat-x; }

y entonces estableced el estilo nicamente para IE como ie-only.css:

table { border-collapse: expression("separate", cellSpacing = "5px"); }

As, IE mostrar una tabla con espacios anchos entre las celdas. Slo debis acordaros de conservar la configuracin de anchura adicional. Si actualizis vuestra hoja de estilo principal, tambin deberis actualizarie-only.css. Como es lgico, los comentarios condicionales permiten hacer muchas cosas ms aparte de aplicar estilos a las tablas, porque la hoja de estilo extra puede incluir todo el CSS que necesitis para arreglar errores del IE.

33.2.8. Un diseo sencillo

La mayora de los diseos utilizan combinaciones sencillas de fondo. Por lo tanto, ahora aplicaremos a los encabezamientos de la tabla un fondo gris y cambiaremos el ttulo de manera que sea texto blanco sobre fondo negro:
table { width: 100%; border: 1px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top;

border: 1px solid #000; border-collapse: collapse; padding: 0.3em; caption-side: bottom; } caption { padding: 0.3em; color: #fff; background: #000; } th { background: #eee; }

Esto queda como se ve en la figura 12:

Figura 12. Tabla con ttulo de texto blanco sobre fondo negro y fondo gris claro en las celdas de encabezado

33.3. Variaciones habituales

En este subapartado nos centraremos en algunos arquetipos de diseo habituales que veris muchas veces en muchas tablas de la web.

33.3.1. Aplicar lneas de cebra

Algo que se suele pedir mucho en relacin con las tablas es crear filas de colores alternos. Se suelen denominar "lneas de cebra". Aunque existe cierta polmica sobre si las lneas de cebra ayudan o no realmente al lector, son un estilo muy popular. En la figura 13 se muestra un ejemplo:

Figura 13. Tabla con "lneas de cebra", filas alternativas de color blanco o gris claro

La manera ms fcil de aplicar el efecto de las lneas de cebra es aadir una clase para alternar filas de la tabla y despus utilizar un selector de CSS contextual para aplicar estilos en las celdas de estas filas. Antes que nada, se aaden las clases "par" (odd) e "impar" (even) a las filas de la tabla, as:
... <tr class="odd"> ... <tr class="even"> ...

Podis saltaros la fila del ttulo porque ya tiene un estilo propio. Entonces aadid una clase contextual para definir el fondo de todas las celdas de las filas de la clase impar (odd).
.odd th, .odd td { background: #eee; }

sta es la manera ms sencilla de aadir lneas de cebra a una tabla de HTML que funcione en todos los navegadores, pero no es del todo perfecto porque, qu sucede si despus aads una fila a la tabla? Pues que deberais desplazar todos los nombres de clase odd y even para que todo quedara bien. Hay dos opciones alternativas:

Podis aadir las clases mediante JavaScript no obstrusivo como se demuestra en A List Apart: Zebra Tables. La mayora de los frameworks de JavaScript tambin tienen un mtodo adecuado: Zebra Table Showdown compara toda una gama de implementaciones. Podis utilizar el selector de CSS3 :nthchild, pero an no lo reconocen todos los navegadores. De todos modos, con el paso del tiempo eso ir mejorando.

Podis encontrar ms informacin sobre las lneas de cebra con nth-child en un apartado de dev.opera.com.

33.3.2. Parrillas incompletas

Algunos diseos responden bien con parrilas de aspecto ms abierto y menos estructurado. Una variante muy sencilla consiste en eliminar los bordes verticales y dejar que el fondo llene el ttulo, como en la figura 14:

Figura 14. Tabla con bordes gris claro slo por los extremos y por debajo de cada celda

El CSS para conseguir este efecto es:

table { width: 100%; border: 1px solid #999; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } caption, td, th { padding: 0.3em; } th, td { border-bottom: 1px solid #999; width: 25%; } caption { font-weight: bold; font-style: italic; }

Tambin podis ir un paso ms all y eliminar todos los bordes excepto el borde superior e inferior para dar un poco ms de definicin a la tabla central. Podis ver la figura 15:

Figura 15. Tabla con bordes slo en la parte superior e inferior de la tabla central

El CSS para conseguir este efecto es el siguiente:

table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } caption, td, th { padding: 0.3em; } tbody { border-top: 1px solid #000; border-bottom: 1px solid #000; } tbody th, tfoot th { border: 0;

} th.name { width: 25%; } th.location { width: 20%; } th.lasteruption { width: 30%; } th.eruptiontype { width: 25%; } tfoot { text-align: center; color: #555; font-size: 0.8em; }

33.3.3. Parrillas interiores

Puede que en ocasiones os interese eliminar el borde exterior pero conservar la parrilla interior de bordes como en la figura 16:

Figura 16. Tabla con un diseo de parrilla interior

Para aplicar este efecto a todos los navegadores actuales, debis aadir una clase a las celdas th y td que aparecen en el ltimo lugar de cada fila, as:
... <tr> <th <th <th <th </tr> ...

scope="col">Volcano Name</th> scope="col">Location</th> scope="col">Last Major Eruption</th> scope="col" class="last">Type of Eruption</th>

Entonces utilizamos la clase para eliminar el borde derecho de estas celdas. El CSS completo es el siguiente:
table { width: 100%; text-align: left;

border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } caption, td, th { padding: 0.3em; } th, td { border-bottom: 1px solid #000; border-right: 1px solid #000; } th.last, td.last { border-right: 0; } tfoot th, tfoot td { border-bottom: 0; text-align: center; } th { width: 25%; }

Parrillas interiores con :lastchild

Cuando mejore la compatibilidad de los navegadores, podremos utilizar pseudoselector :lastchild para conseguir este efecto sin clases. El CSS sera:
table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } caption, td, th { padding: 0.3em; } th, td { border-bottom: 1px solid #000; border-right: 1px solid #000; } th:lastchild, td:lastchild { border-right: 0; } th { width: 25%; }

el

Esto ya funciona actualmente en las ltimas versiones de Opera, Firefox y Safari.

33.4. Dos errores comunes

En este ltimo subapartado hablaremos de dos errores realmente muy habituales para que estis preparados cuando os los encontris. Tienen que ver con los bordes y los ttulos.

33.4.1. Error de superposicin de los bordes

Cuando definis la tabla con border-collapse: collapse; descubriris que Firefox y Safari no muestran correctamente la anchura de los elementos de la tabla. Por ejemplo, si establecis un borde de 1 pxel para la tabla, las celdas y el ttulo, Firefox mostrar el ttulo 1 pxel ms corto por el lado izquierdo, como se ve en la figura 17:

Figura 17. El error de border-collapse afecta a Firefox y Safari.

Safari hace lo mismo, pero en el lado derecho. Este error se basa en una cuestin de redondeo que se reduce al problema de cmo representar "medio pxel". Se podra afirmar que no se trata de un error per se, pero los navegadores no estn de acuerdo, de manera que en la prctica s que se trata de un error. Cmo se puede solucionar? Si queris utilizar un borde de 1 pxel y un fondo de ttulo, no hay ninguna otra solucin aparte de aceptarlo. Es una diferencia muy pequea y no se trata de un problema grave. Es decir, la tabla sigue siendo perfectamente legible. Por lo tanto, mucha gente opta por aceptar las diferencias entre navegadores. La web tiene estas cosas. Si no os importa utilizar un borde ms grande, como por ejemplo de 2 pxeles, podis establecer un borde de 1 pxel en la tabla, las celdas y el ttulo y despus definir la tabla para que tenga los bordes separados y aplicar un espacio de cero entre ellas.
table { border-collapse: separate; border-spacing: 0; border: 1px solid #000; } th, td, caption { border: 1px solid #000; }

En el caso de Firefox, como mnimo los bordes de 1 pxel se suman para crear el borde representado de 2 pxeles que queremos obtener, de manera que nos ahorramos el problema del redondeo. El Safari, en cambio, sigue dejando un espacio. Por otra parte, podis evitar el problema si no aplicis borde ni color de fondo al ttulo. El problema no desaparecer, pero no se notar. Probablemente, sta es la solucin ms fcil y efectiva.

33.4.2. Error de margen/caption

Si utilizis una caption y establecis un margen en table (tabla), debis tener en cuenta que puede que Firefox y Safari dispongan el margen de la tabla entre las celdas de la tabla y el ttulo. Para evitar que suceda esto en Firefox, podis definir el margen en tres lados de la tabla, definir explcitamente el caption-side (lado en el que aparece la caption) y despus aadir el cuarto margen en la caption. Por desgracia, en el caso de Safari, esta solucin causar error. Por lo tanto, no se trata realmente de una solucin a no ser que estis dispuestos a tolerar el error en Firefox o Safari. La nica manera de evitar un problema en Firefox y, a la vez, en Safari, es establecer un margen cero al lado de la caption. Por ejemplo, si el ttulo se encuentra en la parte superior, podis establecer el margen en el lado de la derecha, abajo y en el lado izquierdo o slo abajo. Esto puede que funcione si defins todos los mrgenes en el mismo lado de los elementos de contenido, de manera que no sea necesario que el margen cree espacios entre la tabla y el contenido adyacente.

Resumen
Ya deberais dominar las opciones de estilo bsicas para tablas. Hay ciertos lmites que imponen las inconsistencias de los navegadores, pero en general deberais poder crear tablas claras y legibles sin ningn problema. Slo debis fijaros bien en los bordes, dar al texto un poco de espacio para que pueda "respirar" e ir con cuidado con los fondos.

Preguntas de repaso
Preguntas a las que deberais poder responder: 1. Cmo se controla el espacio entre la tabla y los bordes de las celdas? 2. Qu sucede cuando table (tabla) tiene un color de fondo, las celdas th y td tienen otro color de fondo y border-collapse (superposicin de bordes) est establecido en collapse (superposicin)? 3. Cmo pueden establecerse anchos diferentes para cada columna?

Lecturas complementarias

W3C: CSS2 Tables, sobre todo el apartado que habla sobre las capas de fondo de tabla de CSS2. "A Dao of Web Design - let the web be the web". A List Apart. Un artculo clsico que explica por qu una diferencia de 1 pxel entre navegadores no es realmente importante. "Zebra Tables" y "Zebra striping: Does it Really Help?". En: A List Apart. "Zebra striping tables with CSS3" "Supporting IE with conditional comments" "A CSS styled table" y "A CSS styled calendar". En: Veerle's blog

"CSS Table Gallery" muestra una serie de diseos para tablas (aunque hay que tener en cuenta que muchas no cumplen las recomendaciones de contraste de color del W3C)