Sobre los estilos que se pueden aplicar a COL y COLGROUP, más la no herencia de la propiedad color : Elements col i colgroup @ a.css.
Ya que las celdas (de una tabla / TABLE) no pueden heredar color de COLGROUP o COL, el autor comenta:
En resum, fins que no es pugui utilitzar un selector del tipus
:nth-child()s’haurà d’emprar classes per cada cel·la de la columna.
Traducido: usar el selector :nth-child() o clases para aplicar estilos a una columna.
Usar clases no me parece la mejor opción. Si fuera para destacar una celda en particular tendría sentido, pero en este caso el verdadero elemento estructural es la columna. El elemento que debería ser de una determinada clase es COLGROUP o COL.
Por otro lado, no es necesario esperar implementaciones de :nth-child() cuando ya tenemos varias de :first-child y selector de adjacentes. Suponiendo una tabla de n filas y 3 columnas, y queremos que el texto de la segunda columna sea verde, alcanzaría con td:first-child + td {color: green }. Ejemplo 1.
Claro que un problema es que se necesita tener la seguridad que la cantidad de columnas (antes de la columna a resaltar) nunca cambie.
Por otro lado, hay un problema que afectaría tanto si usaramos el método de :nth-child() como el de :first-child: ¿a cuantos elementos equivale un celda con un colspan diferente de 1?. Suponiendo el siguiente extracto de una tabla:
<tr>
<td> Celda 1 </td>
<td> Celda 2 </td>
<td> Celda 3 </td>
</tr>
<tr>
<td colspan="2"> Celda 1 + 2 </td>
<td> Celda 3 </td>
</tr>
Pero aún hay más. Si se supone que sólo podemos definir el color de fondo de una columna, estaríamos rompiendo con una de las reglas de CSS: si definimos el color de fondo, debemos definir el color del texto. Ejemplo 3.
7 comentarios. Agregá el tuyo →
mini-d
A lo largo de este tiempo he visto pocas aplicaciones de ubicar colores a una columna. El trabajo siempre se lo lleva las filas.
Colorear filas intermedias se me escapa ya. Yo utilizo una clase para no tener que romperme más la cabeza con otras cosas que, en definitiva, no funcionan en muchos navegadores. Cuando sean soportadas, será cambiar un par de cositas al CSS, borrar las class y listo
22 de febrero de 2006
Federico
En algunos calendarios, los domingos van en color rojo.
Igualmente, según he visto, el soporte para
COLGROUPdebería ser perfecto [edit] pero resultó ser patético.22 de febrero de 2006
are
Ahí has estado fino
Para los casos con
colspan(suponiendo una regla base del tipo:first-child+td+tdse podria añadir un selector tipo:first-child[colspan="2"]+tddefiniendo los mismos estilos para ambos y una regla a parte para resetear la celda desplazada con
:first-child[colspan="2"]+td+tdEsto supone saber a priori la estructura que va a tener la tabla, claro. Para tablas complejas con
colspanvariables se complica el temaEl problema de la indeterminación de número de columnas se puede solucionar con un CSS dinámico. Si la tabla lo es el CSS también puede serlo (aunque sólo sea esta regla)
El problema del el verdadero elemento estructural es la columna que comentas no lo veo exactamente así.
Conceptualmente sí tienes razón ya que es una matriz con filas y columnas pero la estructura real del HTML no es así, las filas són la estructura y las columnas són más bien un metadato estructural . (aquí me meto en un tema espinoso)
Para el tema
color/background-colores sólo una adverténcia de verificación manual. Si el validador pudiera ir determinando elcolor/background-colorheredado se podria llegar a determinar el grado de contraste de igual forma que si estuvieran los dos declarados en la misma regla.22 de febrero de 2006
Federico
JA! ¿Me creerías si te digo que ni se me cruzó por la mente el selector de atributos? Triste de mí.
Sobre la columna como estructura, lo digo especificamente por el uso de
—.
class. Me parece que cuando le agregas una clase a todas las celdas de una columna, en realidad querés seleccionar la columna — agregarle una clase a cada celda me parece más un hackSobre
. Si tenemos que ser precavidos en todos los elementos, ¿por qué no con
color/background-color: conflicto con las hojas de estilo de usuarioCOLGROUP?. Sí, una User CSS que se acuerde deCOLGROUPsólo existe en realidades alternativas, pero no deja de ser una contradicción con una de las reglas de CSS.22 de febrero de 2006
a.css, esbudellant estàndards » Elements col i colgroup
[…] En Federico amplia les possibilitats amb el post Seleccionando columnas con :first-child y la propiedad color en colgroup […]
22 de febrero de 2006
Rodrigo
Excelente ejemplo de selectores adyacentes, MAN.
Respecto a saber la estructura del arbol del documento con seguridad … te iba a decir que podés usar un poquito de DOM, pero me vas a putear, asi que mejor me callo
23 de febrero de 2006
a.css, esbudellant estàndards » Estilar columnes d’una taula
[…] Des que en Federico va donar una solució i la vem polir als comentaris he estat mirant una manera de solucionar el tema per Internet Explorer 6 que no demani afegir aquest extra. Al final m’he decantat per modificar l’arbre DOM. […]
28 de febrero de 2006