CSS - Lección 8: Aplicando hojas de estilo a las tablas

Con las hojas de estilo podemos proporcionarle un aire nuevo a nuestras tablas, que son los objetos que albergan a los datos tabulados. En esta misma web se utiliza código CSS para diseñar las tablas de este curso.

Como ves, por las tablas de este curso, podemos diseñar éstas de forma muy flexible; personalizándolas hasta límites insospechados. Por ejemplo, dándole un color a cada fila.

A continuación se te presentan las propiedades que podemos usar para diseñar nuestras tablas:

Propiedades para diseñar tablas
border-collapse Fuerza a que los bordes contiguos de las celdas se solapen
border-spacing Para establecer la distancia entre los bordes de las celdas
border-style Para habilitar un borde, con un estilo determinado
background-color Para aplicar un color de fondo a la tabla
padding Pone un margen entre el borde de las celdas y su contenido

Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco separadas las unas de las otras. Con la propiedad border-collapse podemos conseguir controlar este aspecto.

Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que establece el que se adosen las celdas contiguas. El segundo valor es el que se establece por defecto, y deja una separación entre las celdas.

En la imagen 9 puedes ver este concepto más gráficamente:


Figura 9.  Podemos hacer colapsar los bordes para que las celdas
se adosen unas con otras.

Si lo que deseamos es que las celdas de una tabla guarden una separación entre ellas, podemos controlar la distancia de la separación de las celdas. Para ello nos valdremos de la propiedad border-spacing. Los valores que tomará esta propiedad serán cantidades en píxeles.

Aunque existen otras magnitudes para medir la cantidad de distancia, como por ejemplo porcentajes, por ahora nos vamos a centrar en la unidad de pixel. En una próxima lección nos centraremos en las distintas unidades que podemos manejar con las hojas de estilo en cascada.

También tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante la propiedad background-color estableceremos los valores en las modalidades que analizamos en la lección 7 de este mismo curso.

Cuando creamos una tabla, ésta no aparece como tal, sino que lo que vemos son solo los datos tabulados contenidos en la tabla. Esto es porque los bordes no aparecen. Con la propiedad border-style podemos hacer que se muestren los bordes, pudiendo elegir entre varios tipos. A continuación los tipos y sus características:

Cuatro tablas con los distintos estilos de bordes con el nombres del valor correspondiente.
Figura 10.  Podemos elegir entre distintos tipos de bordes
para las tablas o las celdas.

Vamos a implementar un código para que asimiles mejor el funcionamiento de todas estas propiedades que hemos visto para las tablas y sus celdas (también pondrémos la imagen de la tabla que genera el código):

table {
  border-style:double;
  background-color:aliceblue;
  border-spacing:12px;
 }

th {
  border-style:solid;
  background-color:aquamarine;
 }
  
td {
  border-style:groove;
  background-color:orange;
  padding:4px;
 }

Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el código diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el borde de la tabla, uno sólido para los encabezados y otro de bajo relieve para las celdas normales. Obversa también que le hemos dado un color de fondo diferente para cada elemento: los encabezados con un azul verdoso, las celdas con naranja y la tabla con gris.

Por otro lado se ha puesto un espacio entre el borde de la tabla y las celdas mediante la declaración border-spacing:12px; ubicada en el selector table. Esta declaración la heredarán las celdas también. Por último hemos utilizado la declaración padding:4px; en el selector td para dejar un margen entre el borde de las celdas y su contenido.

En la figura 11 se muestra el resultado del diseño que implementaría el código anterior:


Figura 11.  Un diseño de tabla realizado con código css.

Ir a:

Aprende Gratis 2007 © Mario Raja
página optimizada para todas las resoluciones