Columnas - Universitat Pompeu Fabra

Curso de Verano 2010
Estilos CSS para el Diseño Web
5. CSS en datos tabulares
5.1 Celdas y filas
Las tablas en HTML son uno de los elementos más odiados por los diseñadores y maquetadores
web ya que durante muchos años se usaron para fines ajenos a su origen 1: las tablas se usaban
para maquetación y no para contener lo que debían y para lo que fueron pensadas: datos
tabulares.
Afortunadamente, la tendencia actual (y desde hace unos años) es que el CSS se use para el diseño
de la maqueta y su layout, permitiendo que las tablas regresen a su esencia, que es mantener
datos en filas y columnas2.
Tablas simples
Veamos cómo se usa el CSS para afectar a las tablas y sus celdas. Seguramente, aparecerán en el
HTML etiquetas poco usadas y atributos o elementos poco conocidos3, pero que son muy útiles al
usar CSS aplicado a tablas, y con ello teniendo ambos lenguajes correctamente utilizados con
datos tabulares.
Código HTML
La muestra en el código 4 es una tabla simple, con algunas etiquetas específicas de una tabla
correctamente definida.
En el navegador, sin aplicar ningún estilo, el resultado es como el que sigue:
En el marcado HTML hay bloques de código que merecen verse con detalle, ya que se relacionarán
con el CSS y se trata de etiquetas poco utilizadas fuera de la cuestión de datos en espacio tabular.
1
Provocando con ello muchos problemas en el diseño web. Las tablas permitían diseño complejo en términos de un
layout armado con celdas, complicando un diseño web en términos de accesibilidad, dificultando la labor del
diseñador, y obligando muchas veces a diseño ‘artesanal’ de las páginas web.
2
Ya que los datos en tablas no son malos, y son muy necesarios. Las tablas no tienen la culpa de todo lo que se llegó a
hacer con ellas ;-)
3
Ya que usualmente sólo se usan <tr> y <td>.
4
Ver 101.html en el tema 5.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
1
Curso de Verano 2010
Estilos CSS para el Diseño Web
Atributo Summary
El valor del atributo summary no es visible para el usuario, pero se trata de un elemento de
ayuda para usuarios con problemas de visión. El atributo permite ofrecer un resumen de lo que
trata la tabla 5.
<table class="datatable"
anuales.">
summary="Tabla
con
un
resumen
de
los
ingresos
El elemento caption
El valor de caption permite añadir una descripción corta de la naturaleza de la tabla 6.
<caption>Ingresos anuales 2000-2003</caption>
El elemento th
El encabezamiento de filas o columnas se logra a partir de la etiqueta th. En el ejemplo, puede
verse el marcado correcto para encabezados tanto de fila como de columna a partir del atributo
scope de la etiqueta.
La indicación es directa en los valores del atributo, al aplicarse como cabecera de columna (col) o
fila (row).
<th scope="col">2000</th>
<th scope="row">Ventas</th>
CSS para tablas
Veamos lo que es posible lograr con el mismo marcado HTML pero aplicando CSS para dar formato
a la tabla y sus datos 7. Es cierto que sólo con el HTML ya podíamos afectar cosas simples8, pero
con CSS el resultado se vuelve algo mucho más estético, manejable, y con un resultado que se
aleja mucho del diseño plano original.
Comencemos con un CSS simple. La parte que afecta a las tablas 9, es la siguiente:
.datatable {
border: 1px solid #338BA6;
border-collapse: collapse;
}
.datatable td, .datatable th {
border: 1px solid #73C0D4;
}
Que incluye estilos CSS simples, y cosas ya conocidas, con la notación compacta para la propiedad
del borde de la tabla. Lo único nuevo a destacar es la presencia de border-collapse.
5
Los lectores web para invidentes permiten que esta etiqueta aporte información directamente, sin tener que ver
celda a celda qué contiene la información tabular.
6
En el CSS, como veremos, es posible adecuar la posición de esta descripción con la propiedad caption-side.
7
Ver 102.html y su estilo asociado, en este tema.
8
Con lo básico de HTML podemos tocar cosas como el borde de celdas o el color de fondo, pero sabemos que eso
implica depender mucho del HTML para el diseño, algo que no queremos más.
9
En el CSS se incluye un ajuste simple de la tipografía del <body>.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
2
Curso de Verano 2010
Estilos CSS para el Diseño Web
Esta propiedad se encarga de eliminar el espacio entre las celdas de la tabla para la aplicación de
bordes.
En el navegador, se mostrará así:
Como experimentación, si eliminan 10 el border-collapse veríamos algo como esto:
Donde podemos ver que hay dos bordes: un borde de la tabla como tal (el que se aplica con
.datatable en el CSS) y otro interno, de las celdas (el que se aplica a los td y th dentro de la
clase en cuestión).
Como podemos ver, el border-collapse permite colapsar los bordes, y evitar los espacios que
surgen entre el borde de las celdas11.
Más ajustes
Otro ejemplo 12 nos permite ver la facilidad que tenemos para aportar mejoras a las tablas.
Podemos, por ejemplo, asignar un estilo distinto a las celdas de datos y a las cabeceras de fila o
columna, y podemos dar un estilo al caption, de modo que actúe como encabezado visual de la
celda.
El CSS del código de ejemplo logra algo como lo que sigue:
10
Directamente eliminando la propiedad del CSS.
Su ya habían usado tablas en HTML, esto se relaciona con lo que se ajustaba, en el marcado HTML, con arreglos
como cellspacing=”0”, pero ello implicaba bordes dobles, ya que los bordes se tocan pero no se sobreponen
entre sí. El border-collapse reduce esto a un borde común, colapsado.
12
Ver 103.html en este tema.
11
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
3
Curso de Verano 2010
Estilos CSS para el Diseño Web
Que sale del CSS incluido:
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
}
.datatable td {
border: 1px solid #D6DDE6;
text-align: right;
padding: 0.2em;
}
.datatable th {
border: 1px solid #828282;
font-weight: bold;
text-align: left;
padding: 0.2em;
background: #CCCCCC;
color: #006699;
}
.datatable caption {
color: #FFFFFF;
padding: 0.4em 0 0.3em 0;
border: 1px solid #789AC6;
font-size: 1.1em;
font-weight: bold;
background: #006699;
}
Las propiedades del código CSS son ya conocidas. Ustedes pueden como siempre, revisar y
modificar a voluntad.
5.2 Colores e imágenes
Veamos un poco más de cómo aplicar color a las tablas, con el fin de que el CSS nos permita
controlar completamente cómo se presentarán.
Filas alternadas
Un ejemplo común del ajuste de datos tabulares es presentar los datos con las filas de colores
alternos, para una lectura más fácil 13.
13
Donde se puede ver claramente en qué fila estamos, especialmente al revisar tablas extensas.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
4
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el código de muestra 14 podemos ver que las filas (<tr>) incluyen (alternando) una clase que
permite diferenciarla de la fila anterior y siguiente:
<tr>
<td>Alex Ramírez</td>
<td>27/08/1997</td>
<td>Cocina</td>
<td>12009</td>
</tr>
<tr class="altrow">
<td>Speedy González</td>
<td>20/07/1997</td>
<td>Atletismo</td>
<td>12010</td>
</tr>
<tr>
<td>Rafael Márquez</td>
...
Como podeos imaginar, es esta clase la que nos permite controlar los colores alternos en las filas.
En el CSS, esa parte queda en:
.datatable tr.altrow {
background-color: #DFE7F2;
color: #000000;
}
El resto del CSS es muy simple, con propiedades ya revisadas en este tema y temas anteriores.
En el navegador, se verá así:
Donde es evidente que podemos ajustar cada fila para que se muestre como deseamos.
Rollovers
Otra forma de ayudar visualmente en la revisión de datos es la de aplicar un efecto de rollover
que, con el ratón, nos indique en qué fila estamos trabajando.
14
Ver 201.html en este tema.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
5
Curso de Verano 2010
Estilos CSS para el Diseño Web
El código de muestra 15 incluye un CSS capaz de provocar este efecto a partir de una pseudo-clase.
Dentro del código, este bloque concreto se encarga del rollover.
.datatable tr:hover {
background-color: #DFE7F2;
color: #000000;
}
El :hover ya lo conocíamos como pseudo-clase de los enlaces, pero las filas de las tablas también
pueden aplicarlo.
Al aplicar esto, la única restricción a tener presente es que los navegadores viejos (y, en especial,
los que no siguen estándares 16) no mostrarán el efecto.
En el navegador se verá, al poner el ratón sobre una fila, de este modo:
Columnas
El control de las filas es muy simple, ya que cada fila queda claramente marcada por el <tr>, pero
el control de las columnas requiere un marcado HTML adicional.
En otro ejemplo 17, podemos ver cómo podemos lograr algo como lo que sigue en nuestro
navegador:
El HTML es el de una tabla simple, pero incluye, en la tabla, un grupo de etiquetas poco conocidas:
las etiquetas <col>.
15
Ver 202.html.
El MS IE6, por ejemplo, es uno de estos casos.
17
Ver 203.html.
16
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
6
Curso de Verano 2010
Estilos CSS para el Diseño Web
<table class="datatable">
<col
<col
<col
<col
class="odd" />
class="even" />
class="odd" />
class="even" />
<tr> ...
Sabemos que las tablas se construyen con la definición de las filas, pero cuando es requerido
conocer la estructura de las columnas, usamos <col>.
A diferencia de las filas, <col> no incluye elementos en su interior (es decir, no incluye las celdas)
sino que sirven para definir grupos de columnas. Esto permite que CSS pueda ser aplicado a la
columna y no a las celdas o filas.
El CSS relevante es el de los bloques siguientes:
.datatable col.odd {
color: #000000;
background: #99CCCC;
}
.datatable col.even {
color: #000000;
background: #99CC00;
}
Donde definimos estilos para la clase de cada columna en nuestro HTML. El ejemplo simplemente
da colores a las dos clases.
Grupos de columnas
Aprovechando el uso de tablas, podemos ver otro HTML18 que puede usarse para agrupar
columnas de acuerdo a nuestros intereses.
En el HTML, tenemos los siguientes grupos de columnas:
<table class="datatable">
<colgroup class="odd">
<col />
<col />
</colgroup>
<colgroup class="even">
<col />
<col />
</colgroup>
<tr>...
Con los grupos de columnas agrupados dentro de colgroup.
Cada colgroup es un contenedor para un número variable e elementos col, lo que nos permite
aplicar atributos CSS simultáneamente a un conjunto de elementos col. De otro modo,
tendríamos que aplicar ajustes a cada col de forma independiente.
18
Ver 204.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
7
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el CSS, tenemos estos bloques:
.datatable colgroup.odd {
color: #000000;
background: #99CCCC;
}
.datatable colgroup.even {
color: #000000;
background: #99CC00;
}
Donde aplicamos un estilo distinto a cada agrupación de columnas.
En el navegador, agrupando de dos en dos las columnas, se mostrará de la siguiente forma:
Imágenes
Para finalizar este tema, podemos ver el efecto de aplicar una imagen como fondo. El código de
muestra incluye este HTML 19:
<table class="datatable">
<tr>
<th>Grupo A</th>
<th>Grupo B</th>…
Que, como sabemos, nos permite ajustar libremente el estilo de esa clase. En nuestro CSS aparece
esto:
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 50%;
background: url(imagenes/soccer_field.jpg);
}
Donde se incluye la imagen siguiente:
19
Ver 205.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
8
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el navegador, esto se mostrará como sigue:
Como nota importante, pueden ver que el estilo de los <th>, con colores planos, oculta la imagen.
Si quitamos el color de fondo de ese estilo, tendríamos algo como esto:
En las tablas, si definimos un color de fondo para las celdas, <td>, sucedería lo mismo: el color
queda encima de la imagen, cubriéndola.
De temas anteriores, sabemos que tenemos algunas opciones para el control de la imagen del
background en algunos elementos pero en las tablas el control no es total: podemos ajustar la
repetición, pero no la posición, y hay que eliminar colores de fondo si deseamos aplicar una
imagen.
Les toca experimentar con las opciones y ajustes que deseen.
Como siempre, y para cualquier duda, los foros están siempre abiertos.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
9