TYP. CSS estilos a etiqueta col

Aquí dejo un TYP para intentar hacer más llevadera e incluso flexible el diseño y la maquetación de las tablas.

Hasta hace muy poco desconocí­a la utilidad de la etiqueta de HTML <col>; pues bien, nos puede resultar muy útil a la hora de maquetar si lo que queremos es distinguir las columnas de una tabla.

<col> crea un elemento que corresponda a cada columna. El código será algo similar a lo siguiente:

col1 col2 col3 col4
bodycol1 bodycol2 bodycol3 bodycol4
bodycol1 bodycol2 bodycol3 bodycol4
bodycol1 bodycol2 bodycol3 bodycol4

Ahora sumaremos un par de estilo a nuestras columnas:

col:first-child {background:#fff;}
col:nth-child(2n+1) {background:#ccc;}

Quedará de la siguiente manera:

col1 col2 col3 col4
bodycol1 bodycol2 bodycol3 bodycol4
bodycol1 bodycol2 bodycol3 bodycol4
bodycol1 bodycol2 bodycol3 bodycol4

El fondo de las filas (TR) se dibuja enfrente del fondo de las columnas (COL), de modo que no hay que ponerle fondo a las filas, o el fondo de las columnas no será visible.

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *