| NOTA : Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de esta web. |
| |
| En este tutorial voy a explicar con detalle cómo construir tablas en HTML. También explicaré la manera de darles forma, color y aplicarle todo tipo de agentes visuales, pero esto lo haré a través de propiedades de CSS, aunque es cierto que el HTML también tiene herramientas para modificar el aspecto visual de las tablas. |
| ¿Por qué lo voy a hacer así? Porque creo que es como debe hacerse. Las propiedades visuales de las tablas se crearon en HTML cuando aun CSS no podía cubrir esa necesidad, pero ya que tenemos un lenguaje creado específicamente para hacer esta labor, ahorrándonos además muchas líneas de programa y simplificando la comprensión de nuestro código, es absurdo seguir utilizando las viejas formas. |
| Explicaré tan solo las propiedades que vamos a utilizar de cada etiqueta HTML referente a las tablas, aunque siempre tenéis los documentos de referencia para poder saciar vuestra curiosidad. |
| Por si alguien tiene dudas de concepto, una tabla es una representación de elementos dispuestos en filas y columnas (mostrándose así con un cierto orden). Así de simple. Las filas se representan horizontalmente y la columnas (como su nombre nos hace imaginar) se representan verticalmente. Cada intersección entre una fila y una columna nos lleva a un espacio donde colocamos un elemento. Este espacio lo denominamos CELDA. |
| Por ejemplo, si yo quisiera tener un cuadro con los datos de las notas que he sacado en cada trimestre del curso, utilizaría una tabla. |
| Esta tabla tendría un título, por ejemplo, "CUADRANTE DE CALIFICACIONES POR TRIMESTRE Y ASIGNATURA", y luego podría poner los trimestres como nombres de filas, y las asignaturas como nombres de columnas (aunque en este caso podría haberlo dispuesto al revés perfectamente). |
| Así podría quedar. |
 |
| En este ejemplo, la tabla consta de 4 filas y de 6 columnas. Es interesante que os deis cuenta de que realmente los datos de nuestro cuadro o tabla están contenidos en 3filas y 5 columnas (15 datos), el resto (la primera fila y la primera columna) solo aportan semántica y comprensión a lo datos, para que se puedan entender mejor. Esas columnas y filas especiales podemos llamarlas encabezados. |
| También es interesante entender que, si excluimos de la tabla las filas y comunas de encabezados, dejando solo los datos, la nota del 2º TRIMESTRE de HISTORIA está representada en la celda correspondiente a la FILA 2 COLUMNA 3 de la tabla (repito, excluyendo del orden de las filas y columnas a aquellas que son encabezados). |
| Voy entonces a definir los tags de HTML necesarios para crear una tabla con estos datos, de momento. |
| |
 < TABLE >
|
| Estas etiquetas marcan el comienzo y fin de una tabla. Dentro de ella definiremos su título, filas, columnas, agrupaciones de filas y columnas e incluso si quisiéramos (que NO queremos) sus propiedades de visualización. Las dos etiquetas son obligatorias, pues son necesarias para delimitar el contenido de la tabla. Con esta etiqueta < TABLE > como con todas las demás que vamos a ir viendo, podemos utilizar los identificadores a nivel de documento ID y CLASS, que tanto nos van a servir para aplicarles las propiedades CSS. |
| Tiene varias propiedades que determinan su forma de visualización, pero como eso lo veremos con propiedades CSS, solo voy a mencionar una que, aunque muchas veces no la utilizamos, deberíamos hacerlo siempre. |
|
 SUMMARY="cadena" |
|
Esta propiedad permite detallar en un texto el contenido de la tabla, tanto en lo que a su estructura se refiere, como a su contenido. Esto puede parecer inútil, pues podemos ver claramente la estructura de la tabla (la creamos para que se represente visualmente) y de la misma forma podemos leer sus elementos, pero este atributo es esencial para agentes de usuario (navegadores) que trabajen en sistema Braille o con la voz (para personas con discapacidad visual).
En nuestro caso sería algo tan simple como poner:
|
< TABLE SUMMARY="Tabla de calificaciones por trimestres y asignaturas
dispuestas en filas que contiene los trimestres del curso y en columnas
que contienen las asignaturas recibidas" > |
< /TABLE >
|
|
< CAPTION >< /CAPTION > |
|
Esta etiqueta nos sirve para especificar el título de la tabla. Puede omitirse si no se desea ningún título, pero en el caso de ponerla, es obligatorio colocarla a continuación de la etiqueta < TABLE >. Las dos etiquetas son obligatorias. Para nuestro ejemplo:
|
| < CAPTION >CUADRANTE DE CALIFICACIONES POR TRIMESTRE Y ASIGNATURA |
| < /CAPTION > |
| |
|
| |
< TR >< /TR > |
| Son las etiquetas que definen el espacio de una fila de la tabla (TR=Table Row). La etiqueta de cierre es opcional, aunque yo siempre la pongo porque hace mas legible el código. |
< TH >< /TH > < TD >< /TD > |
| Son las etiquetas que definen cada una de las celdas de datos de la tabla. Si la celda va a contener un dato de encabezado, utilizaremos TH (TH=Table Header) y si la celda va a ser de datos normales, utilizaremos TD (TD=Table Data). Las etiquetas finales de ambas, son opcionales. |
La diferencia entre TH y TD es meramente representativa. Sin utilizar hojas de estilos, cualquier elemento incluido en una celda declarada como TH se verá representado en negrita, destacando su contenido respecto a si estuviera en una celda de tipo TD.
|
| Las propiedades de estos tags (TR, TH, TD) que son útiles son las siguientes: |
|
ROWSPAN=numero |
|
Donde "numero" representa el número de filas que abarca esa celda. Sirve para definir una sola celda que ocupe el espacio de varias. El valor 1 es el que tiene por defecto, y en ese caso no hay que declarar la propiedad. |
|
COLSPAN=numero |
|
Donde "numero" representa el número de columnas que abarca esa celda. Sirve para definir una sola celda que ocupe el espacio de varias. El valor 1 es el que tiene por defecto, y en ese caso no hay que declarar la propiedad. |
| |
|
| El siguiente código muestra como sería nuestra tabla utilizando los elementos que hemos visto hasta ahora (sin COLSPAN ni ROWSPAN, de momento) |
 |
| Este EJEMPLO muestra el resultado. |
Se ve claramente la diferencia entre los elementos que hemos definido como encabezados y los que son simplemente datos. Obviamente, la tabla es muy mejorable a nuestra vista. Eso lo haremos más adelante.
|
| Supongamos ahora que deseamos añadir una última fila tan solo con 2 celdas. La primera pondría "NOTA FINAL DEL CURSO" y en la segunda escribiríamos el valor correspondiente (la tabla no hace cálculos de ningún tipo, solo los representa). |
| Añadiremos ahora a nuestra tabla una última fila y utilizaremos la propiedad COLSPAN para unir en la primera celda las 4 primeras columnas de celdas de esa fila, y en la segunda a las dos últimas columnas de esa misma fila. |
 |
| Este EJEMPLO 2 muestra el resultado. |
En este caso he definido las dos celdas de esta última fila como de tipo TH para resaltar su contenido, aunque no es necesario.
|
| Es importante hacer bien los cálculos al unir filas y columnas, pues si unimos celdas de varias filas y columnas y esas uniones se llegaran a solapar, la representación dependería del navegador que se utilizara, con la correspondiente falta de control por nuestra parte. El siguiente grafico muestra lo que no se debe hacer: |
 |
La celda del numero 5 ocupa con el ROWSPAN a la celda del numero 8, pero la celda del numero 7 con el COLSPAN ocupa también la del 8, con lo que se genera un conflicto del que cada navegador saldrá como pueda, perdiendo nosotros el control de la situación.
|
| Ahora vamos a crear una nueva tabla y le vamos a aplicar unos estilos visuales con CSS: |
 |
| Vamos a analizar el código de este EJEMPLO 3. |
| Lo primero es que he aplicado estilos CSS directamente a las etiquetas TABLE, TD y TH de nuestro documento. Esto significa que todas las tablas a las que no asignemos una clase o un identificador tendrán este formato. En el caso de que no quisiéramos este efecto, dotaríamos de un nombre de clase o identificador a nuestros elementos de la tabla. Creo que esto lo hemos hecho ya mucho en anteriores tutoriales y no tendréis problemas en comprenderlo. podría haber definido los elementos table.tabla1, th.tabla1 y td.tabla1 en CSS y luego haber referenciado a cada elemento con su nombre de clase < table class="tabla1" .... |
| En este caso lo he hecho así para ahorrar código. |
| Como podéis ver, podemos utilizar todo tipo de elementos CSS para modificar el efecto visual, tanto de la tabla en general como de sus partes. |
| El borde generado en el elemento TABLE es un borde que contiene a toda la tabla, mientras que los bordes de las celdas TD y TH son para cada una de ellas y configuran una perfecta rejilla en la tabla (ahora hablaremos mas de estos bordes). |
| También es interesante observar que el borde de TH es mas grueso que el de TD y eso repercute en el ancho del contenido de la celda (las TH son menos anchas que las TD), pues la alineación de los bordes al exterior de cada celda es perfecta. |
| El padding de los elementos TH no afecta a los elementos TD, pero sí que condiciona el tamaño de las celdas TD, como es lógico (prueba tú cambiando el valor del padding y veras como toda la tabla cambia de tamaño). |
Por último, aunque hemos dado un color amarillo a todo el contenido de la tabla, éste no se ve en los elementos TH porque aquí hemos puesto un color distinto (gris, en este caso). Luego veremos por qué pasa esto.
|
MODELO DE BORDES CERRADOS:
|
| Vamos a modificar nuestro código del ejemplo anterior añadiendo a los estilos del elemento TABLE la sentencia: |
BORDER-COLLAPSE: COLLAPSE;
|
| El resultado lo vemos en el EJEMPLO 4. Vamos a analizarlo. |
 |
Efectivamente, entre nuestras celdas ahora solo existe un tipo de borde. Entre las celdas con fondo amarillo, solo aparece un borde gris, que es lo que queríamos. Pero ¿que ha pasado con los bordes de las celdas TH? ¿Por qué han desaparecido algunos y otros no? ¿Y con los bordes inferiores de las celdas TD de la última fila, por ejemplo? |
Tal y como dije antes, de alguna forma cuando exigimos que un solo borde de dos adyacentes se visualice, uno de ellos se representa y otro desaparece. Esto lo trata CSS con una gestión de Conflicto de Bordes estableciendo unas prioridades de unos bordes respecto a otros, que paso a transcribir literalmente del documento CSS de W3C:
|
| La siguientes reglas determinan que estilo de borde “gana” en caso de conflicto: |
| 1. Los bordes con 'border-style' como 'hidden' tiene precedencia sobre todos los demás bordes en conflicto. Cualquier borde con este valor suprime todos los bordes en esa ubicación. |
| 2. Los bordes con un estilo 'none' tienen la prioridad más baja. Solo si las propiedades de borde de todos los elementos que se encuentran en ese lado son 'none' el borde será omitido (pero observe que 'none' es el valor por defecto para el estilo de borde) |
| 3. Si ninguno de los estilos es 'hidden' y al menos uno de ellos no es 'none', entonces los bordes finos son descartados en favor de los mas gruesos. Si varios tienen el mismo 'border-width' entonces los estilos son preferidos en este orden: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', y el más bajo: 'inset'. |
4. Si los estilos de borde difieren solo en el color, entonces un estilo fijado sobre una celda gana a uno aplicado sobre una fila, la cual gana a un grupo de filas, columnas, grupo de columnas, y finalmente, tabla. No está definido lo que ocurre cuento dos colores del mismo tipo entran en conflicto.
|
De esta forma, en nuestro caso, los puntos 1 y 2 no se aplican. El punto 3 es el que se aplica en toda nuestra tabla, dando prioridad siempre a los bordes más gruesos sobre los más finos. Por eso el borde exterior siempre aparece (es el mas grueso de todos) y por eso el borde TH tiene preferencia sobre el TD.
|
MODELO DE BORDES SEPARADOS:
|
| Ya vimos en el EJEMPLO 3 que podemos no declarar la propiedad BORDER-COLLAPSE y por defecto la aplicará como SEPARATE. Pero la declaremos o no, en el modelo de bordes separados tenemos la opción de manipular el espacio que existe entre dos bordes adyacentes de dos celdas o de una celda y el borde de la tabla. Para ello utilizaremos la propiedad BORDER-SPACING en los estilos del elemento TABLE. |
| |
BORDER-SPACING: medida1 medida2 |
| Como he dicho antes, esta propiedad establece el espacio de separación entre celdas de la tabla, o entre las celdas y el borde exterior. Puede tener un solo valor o dos. Si tiene un solo valor, esa será la medida de separación de todas las celdas entre ellas, y si tiene dos valores, el primer valor se refiere a la separación horizontal y el segundo a la separación vertical. |
OJO: Esta propiedad no funciona en IExplorer 6 ni en IExplorer 7. En Iexplorer 8 sí que la han implementado. |
| |
|
| Si cogemos el EJEMPLO 3 y le añadimos las propiedades BORDER-COLLAPSE: SEPARATE; (solo para que se lea mejor el código) y BORDER-SPACING: 5px, 15px; , el resultado será el EJEMPLO 5, donde se ve como el espacio entre los bordes de las celdas horizontales y verticales es distinto. |
 |
Otro problema que nos puede surgir en el modelo de bordes separados es cómo se representan las celdas vacías. Podemos desear que se representen sus bordes o no. Para ello utilizamos la propiedad EMPTY-CELLS: |
| |
EMPTY-CELLS: show / hide |
| Con el valor 'show', los bordes y fondos de las celdas vacías se visualizan normalmente (es el valor por defecto). En los ejemplos 3 y 5 se ve este efecto en la primera fila de la columna Peso. |
| Con el valor 'hide' los bordes o fondos de las celdas vacías no se dibujan. |
OJO: Esta propiedad tampoco funciona en IExplorer 6 ni en IExplorer 7. En Iexplorer 8 sí que la han implementado. |
| |
|
Poniendo EMPTY-CELLS: hide; en el código del EJEMPLO 3, se llega a este resultado (EJEMPLO 6) donde se ve muy bien que los bordes de la celda que está vacía, no aparecen.
|
 |
CAPAS Y TRANSPARENCIAS:
|
| Al principio del tutorial veíamos como el color de fondo establecido para el elemento TH tenia prioridad sobre el establecido para el elemento TABLE. Siempre que haya dos colores de fondo que se superpongan, como en las prioridades a la hora de representar los bordes en caso de conflicto, tiene que resolverse de alguna forma. Para los colores de fondo, la forma de resolverse es la que muestra la siguiente imagen. |
 |
| Creo que la imagen es muy fácil de entender. Aun no he explicado las agrupaciones de filas y columnas, pero solo hay que saber de momento la prioridad que ocupan en la lista y entender que cualquier color de fondo de una capa inferior solo se verá si las capas superiores tiene el BACKGROUND: transparent; |
| Si deseáis profundizar más, acudid al documento de referencia de CSS del W3C. |
| Un detalle a tener en cuenta es que en el modo BORDER-COLLAPSE: separate, el color que se ve entre los bordes es el definido para el elemento TABLE. |
Si recordamos el EJEMPLO 3, veremos que las celdas (ya sean TH o TD) tienen mayor prioridad que el elemento TABLE, por lo que el background gris especificado el TH es el que se visualiza, y no el amarillo. También se observa claramente que entre los bordes de TODAS las celdas (incluidas las TH), el color es el especificado en el elemento TABLE.
|
ANCHO DE UNA TABLA:
|
| Hay dos formas de especificar la anchura de una tabla, uno es automático y otro es fijo. Para ello utilizamos la siguiente propiedad: |
| |
TABLE-LAYOUT: |
| Esta propiedad determina el algoritmo utilizado para determinar el tamaño de las celdas, filas y columnas de la tabla. |
| Los valores que puede tomar son: |
|
fixed |
|
Se utiliza el algoritmos de composición fija de tabla. |
|
auto |
|
Se utiliza cualquier algoritmo de composición de tablas. |
| |
|
MODO FIJO:
|
| En modo fijo podemos definir la anchura total de la tabla con la propiedad WIDTH: medida. Pero esta propiedad también puede tener el valor auto. Si definimos un TABLE-LAYOUT: fixed; y posteriormente un WIDTH: auto; nadie asegura que el navegador vaya a representar la tabla con un ancho tipo auto. Es por lo tanto recomendable no utilizar un WIDTH: auto con un TABLE-LAYOUT: fixed; . |
| En este modo, el ancho de cada columna se determina por las reglas siguientes: |
| 1. Una columna con un WIDTH distinto del valor "auto" especifica el ancho de toda esa columna (luego veremos como definir columnas). |
| 2. Si no, una celda en la primera fila de la tabla con un WIDTH distinto de "auto" especifica el ancho para toda esa columna. Si la celda abarca mas de una columna, el ancho se divide entre las columnas. |
| 3. Las columnas restantes se dividen el espacio horizontal restante de la tabla (menos los bordes o el espacio entre las celdas). |
| El ancho de la tabla es el valor de la propiedad 'WIDTH' para el elemento TABLE o la suma de los anchos de las columnas (mas el espacio entre celdas o bordes) si esta suma es mayor que el ancho de la tabla. Si la tabla es mas amplia que las columnas, el espacio extra debe ser distribuido entre las columnas. |
| Aun no he dado las agrupaciones de columnas, pero vamos a modificar el EJEMPLO 3 especificando una anchura fija para la tabla y después una clase especial para aplicarla a una celda, con una anchura determinada. También he modificado el PADDING de TH para que no sea tan grande la tabla. Si funciona como debe, todas las celdas de esa columna se ceñirán a ese ancho, y el resto de columnas se repartirán el espacio restante. Vamos a verlo. |
 |
| Ahora añadimos un estilo CSS para una celda y le damos ese nombre a una de las de la primera fila (por ejemplo, al DNI). |
| Este es el código resultante (solo se visualiza un fragmento, el resto no se ha modificado) |
 |
| Aquí esta el EJEMPLO 7 y el EJEMPLO 8, y esta es la representación de las dos tablas en la que se ve claramente como funciona el sistema de prioridades de determinación de anchuras. |
 |
MODO AUTOMATICO:
|
| Evidentemente, si tratamos el ancho de tabla y de celdas de modo automático, el navegador ajustará las anchuras de la mejor manera posible. Hay una serie de instrucciones precisas sobre como se hace esto (están en el documento de referencia) pero yo lo voy a abreviar simplificándolo mucho. |
| Básicamente, cada celda se va a ajustar al tamaño mínimo necesario para ubicar su contenido y después, cada columna ajustará su ancho al mayor de las anchuras adquirida por cualquiera de las celdas que la componen. |
De todas formas, creo que con esto de las anchuras de tablas hay que ser muy cuidadosos y consecuentes. Es mucho mas fácil y da mejores resultados establecer nosotros una buena planificación de las anchuras de nuestras columnas que estar dejando al navegador el ajuste de éstas.
|
ALTO DE UNA TABLA:
|
| La altura de una tabla se define por la propiedad HEIGHT. Esta propiedad puede tomar valores numéricos, o el valor "auto". En este último caso, la altura de la tabla sería igual a la altura de todas sus filas. CSS no define lo que pasaría si ponemos una altura de tabla fija menor de la altura especificada para sus filas, con lo que no es buena idea trabajar de esta forma. Desde mi punto de vista, yo calcularía la altura de las filas de mi tabla y la especificaría también con la propiedad HEIGHT. Después, en los estilos de la etiqueta TABLE especificaría la altura a "auto" y ya está. |
| Por ejemplo, al EJEMPLO 8 vamos a añadirle HEIGHT: 30px; a los estilos de los elementos TD. Automáticamente la altura de la tabla cambiará, ajustándose al espacio necesario para llenar todas las filas con la altura especificada. |
El resultado se muestra en el EJEMPLO 9. Si quieres, carga en tu navegador en distintas pestañas los ejemplos 8 y 9 y mira las diferencias. Las cabeceras mantienen su altura, las filas restantes se han ajustado a sus 30px, y la tabla en su conjunto se ha alargado lo necesario para que entren todas sus filas. Perfecto.
|
Volviendo a HTML, voy a explicar ahora las agrupaciones que se pueden hacer en una tabla. Primero veremos las agrupaciones horizontales y luego las verticales. |
| |
< THEAD >, < TFOOT > y < TBODY > : |
| Estas etiquetas representan agrupaciones de filas (por lo tanto, horizontales). En una tabla, las agrupaciones de filas pueden ser, una cabecera, un pie y agrupaciones intermedias de datos. |
| y ¿para que sirven las agrupaciones de filas? |
| Pues básicamente, para separar los contenidos. Es una forma de estructurar nuestra tabla utilizando a la vez esta separación para aplicar formatos visuales a cada agrupación. |
| En el caso de agrupaciones de filas, la cabecera y el pie deben contener información sobre los contenidos de las agrupaciones | . Esto es así porque si utilizamos una tabla que ocupe varias páginas, por ejemplo en un formato por impresora, la cabecera y el pie se representará en todas las páginas que ocupe la tabla.
| |
|
| Consideraciones a tener en cuenta: |
| Estas agrupaciones son opcionales, es decir, podemos no declararlas, pero < TBODY > será obligatoria en el momento en que declaremos alguna de las otras dos. |
| A la hora de declararlas, < TFOOT > siempre va delante de < TBODY > |
| Las etiquetas de cierre < /THEAD >, < /TFOOT > y < /TBODY> son opcionales. |
| Solo habrá una etiqueta < THEAD > y una < TFOOT >, pero puede haber varias < TBODY > |
Quiero dejar claro que estas agrupaciones, tanto como las verticales que vamos a ver ahora, son totalmente opcionales y debéis utilizarlas si os aporta facilidad a la hora de representar y estructurar vuestra tabla. Cualquier uso que le deis que no aporte nada, solo os complicará las cosas. |
En el EJEMPLO 10 he cogido la tabla del EJEMPLO 2 y le he añadido unos cambios visuales. Pero lo importante aquí es que he estructurado la tabla en 3 divisiones horizontales: una cabecera, un cuerpo y un pie. Mira el código sobre el ejemplo en el navegador (ver/código fuente). Date cuenta que al estructurar en cabecera, pie y cuerpo, visualmente no hay diferencias respecto al mismo ejemplo sin esas divisiones, pero si imprimiéramos esta tabla (suponiendo que fuese muy larga), la cabecera y el pie se verían en todas las páginas, y que si nuestra conexión a Internet es muy lenta y los datos son muchos, primero se vería como se carga la estructura de cabecera, luego la del pie, y por ultimo, las del cuerpo. Pero repito, si el caso no va a ser ninguno de esos, creo que es mejor no añadir código que no aporta nada.
|
| |
< COLGROUP >< /COLGROUP > : |
| Con esta etiqueta se crea un grupo de columnas. De la misma forma que en las agrupaciones horizontales, esto nos aporta una forma de estructurar nuestras tablas a la vez que lo utilizamos para aplicar estilos propios a estas agrupaciones. La etiqueta final es opcional. |
| Para especificar cuantas columnas son incluidas en la agrupación se utilizan dos maneras: |
|
SPAN= numero |
|
Donde el numero marca las columnas que se agrupan en este grupo. (Es 1 por defecto y debe ser obligatoriamente mayor que 0). |
|
COL |
|
Cada elemento COL especificado dentro de COLGROUP representa una o más columnas en el grupo. |
Se puede especificar la anchura de cada columna del grupo de columnas con el elemento: |
|
WIDTH=numero |
|
Donde el numero es el ancho de cada una de las columnas que la agrupación contenga. |
| |
|
| |
< COL > : |
| Esta etiqueta nos permite aplicar atributos a grupos de columnas. Solo sirve para eso. Estructuralmente no aporta nada (eso lo hace COLGROUP). Pueden declararse dentro de elementos COLGROUP o fuera de ellos. |
| Del mismo modo que con COLGROUP el numero de columnas incluidas en un grupo COL se define con: |
|
SPAN= numero |
|
Donde el numero marca las columnas que se agrupan en este grupo. (Es 1 por defecto y debe ser obligatoriamente mayor que 0). |
También se puede especificar la anchura de cada columna del grupo de columnas con el elemento: |
|
WIDTH=numero |
|
Donde el numero es el ancho de cada una de las columnas que la agrupación contenga. |
| |
|
ATENCION: La especificación de HTML de hacer agrupaciones en columnas para aplicarle estilos visuales está muy limitada porque CSS 2.1 solo permite aplicar BORDER, BACKGROUND, WIDTH y VISIBILITY a las columnas. Es decir, no podremos realizar una agrupación de columnas para alinear el texto a la derecha, por ejemplo. Esto limita mucho la utilidad de estas agrupaciones, fuera de lo que es la estructuración de la tabla. |
Veamos este código del ejemplo11, que no está completo, pero lo importante se ve en la imagen). |
 |
| Hemos declarado 3 grupos de columnas. El primero consta de dos columnas, que lo he declarado también con el elemento COL dentro de COLGROUP para que veáis como se hace. El segundo y el tercero los he declarado directamente con COLGROUP. |
| Si ejecutamos el EJEMPLO 11 vemos que dependiendo de navegador que utilicemos lograremos cosas distintas. |
 |
| La primera de las dos tablas es como se visualizaría en Firefox. Aquí vemos que solo hace efecto la propiedad BACKGROUND-COLOR. Sin embargo, en la otra tabla (representada en IExplorer) si que hacen efecto el resto de estilos. Hay que dejar claro que el navegador que funciona bien es el Firefox, pues es el que se ajusta a la normativa de CSS 2.1. |
En este caso, si quisiéramos aplicar la alineación del texto a la derecha, por ejemplo en algunas columnas, deberíamos crear una clase que hiciera eso y luego llamarla desde las celdas TD que deseáramos.
|
|
Español
English
