5.1.1. —perdido, buscando el diseño ideal

Primero comprobaremos las implementaciones de COL y COLGROUP relacionados con CSS. Luego agregué algunas observaciones sobre las implementaciones de los atributos en HTML (de estos dos elementos).

La especificación de CSS 2.1 especifica que sólo cuatro propiedades pueden ser aplicadas a estos elementos:

• border (siempre que la propiedad border-collapse del elemento TABLE esté definida como collapse).
• background.
• width.
• visibility (aunque sólo el valor collapse).

Para todos los ejemplos usaré una tabla de 7 columnas y 3 filas, estructurada sólo con COL o con COLGROUP — por eso en algunos casos hay dos tablas.

Tendríamos ¿todas? las variantes: COLGROUP vacio definiendo un grupo con span; COL, como hijo de COLGROUP, definiendo otro grupo; por último, COL, como descendiente directo de TABLE definiendo otro grupo.

Los navegadores en que pudo hacer las pruebas son Opera 9 preview 2, Internet Explorer 6, Firefox 1.5 y Konqueror 3.2 — el resultado en Konqueror debería ser igual en Safari.

Advertencia: Bug en Safari y Konqueror con CAPTION y COLGROUP

Normalmente Safari y Konqueror renderizan bien los ejemplos de background, border y width. El problema es la presencia del elemento CAPTION, que parece provocar que estos navegadores ignoren a COL y COLGROUP. Una solución es alterar el orden de estos elementos en el código: primero COLGROUP/COL y luego CAPTION, aunque así fallaría la validación.

background

Lo único rescatable es que Internet Explorer 6 permita a las celdas heredar color de estos elementos.

Prueba de background.

border

En este caso, sería necesario investigar cuál es el comportamiento correcto. Opera dibuja los bordes alrededor de los grupos delimitados por COL y COLGROUP. Firefox 1.5 dibuja bordes entre las columnas para aquellas que están agrupadas usando COL.

Internet Explorer 6 no dibujó ningún borde.

Prueba de border.

width

El ancho definido se refiere al ancho de cada columna, no al del grupo de columnas. col[span=3] {width:100px} provocaría 3 columnas de 100px cada una.

Prueba de width.

visibility: collapse

Sólo Firefox 1.5 implementó visibility: collapse.

Suponiendo colgroup[span=3], si una de las columnas que agrupa estuviera definida como visibility: collapse, span también se reduciría en una unidad. O sea, cuando una de las columnas de COLGROUP no es visible, este elemento no tiene permitido agarrar las columnas siguientes para honrar a span.

Prueba de visibility: collapse.

visibility: hidden

Aunque la especificación diga que visibility: hidden no es válido para estos elementos, los navegadores tienen sus propias ideas.

Suponiendo que definiéramos las propiedades visibility y border en COLGROUP o COL, además de visibility: hidden.

• Internet Explorer 6 hace completamente invisible las columnas. Basicamente, lo que debería hacer con border-collapse.
• Opera 9, Konqueror y Safari no muestran ningún comportamiento especial.
• Firefox 1.5 deja de mostrar el color de fondo pero respeta los bordes. En este caso estoy indeciso. Si dejara de mostrar colores y bordes, pero respetará el texto, tendría sentido; el elemento es invisible y las propiedades definidas no se dibujan. Pero dado el resultado final supongo que se trata de un error.

Prueba de visibility: hidden.

Cuando COLGROUP y COL discrepan

¿Qué pasaría si tuviéramos un elemento colgroup[span="3"] pero que, a su vez, contuviera un sólo elemento COL? Aparentemente, el elemento COL tiene prioridad.

Prueba de cuando COLGROUP y COL discrepan.

Bug en Konqueror y Safari: COLGROUP sin span

Suponiendo que agrupáramos la tabla en dos grupos: uno de una sola columna y otro con las otras 6 columnas.

<colgroup id="uno">
<colgroup id="dos" span="6">

Safari y Konqueror ignoran el primer COLGROUP — por lo que si definiéramos un color de fondo para #dos, pintaría la primer columna pero no la última.

Prueba de COLGROUP sin span.