CSS son Hojas de Estilo en Cascada. Muchos de vosotros debéis conocerlas ya y supongo que las habréis utilizado en más de una ocasión. En cualquier caso, tanto para aprender lo que son como para afianzar los conocimientos, podéis acceder al Manual de CSS de DesarrolloWeb.com.

Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con títulos que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y se puede utilzar en múltiples elementos de la página. Con todo ello vamos a tratar en este artículo: la definición de un estilo y la aplicación para hacer distintos tipos de decoración de tablas.

Podemos ver el resultado final que vamos a obtener.

Definición de los estilos

En la cabecera de la página colocamos la etiqueta <style> que sirve para definir los estilos a utilizar en la página. Vamos a definir un estilo por defecto para las celdas (etiqueta <td>) y un par de clases, la primera para las tablas y la segunda para las celdas titular (las que tienen color de fondo).

<style type="text/css">
td {
    font-family:verdana,arial;
    font-size:8pt;
}
.estilotabla{
    background-color:ffffff;
    border-style:solid;
    border-color:666666;
    border-width:1px;
}
.estilocelda{
    background-color:ddeeff;
    color:333333;
    font-weight:bold;
    font-size:10pt;
}
</style>

Los atributos de estilos se pueden conocer en el manual de CSS. En este caso, para la clase estilotabla estamos definiendo un color de fondo, un borde sólido, un color del borde y un ancho del borde, por ese orden. Para la clase estilocelda estamos definiendo un color de fondo, un color del texto, un grosor de la fuente y un tamaño de la fuente.

Utilización de los estilos para obtener una tabla decorada

Veamos el código de la primera tabla del ejemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">
<tr><td class="estilocelda">Título de sección</td></tr>
<tr><td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título.</td></tr>
</table>

Lo único que tiene de especial es que utiliza las clases que se han definido previamente. En la etiqueta <table> se utiliza la clase estilotabla y en la etiqueta <td> que queremos que sea el titular se utiliza la clase estilocelda. La otra celda tendrá el estilo definido para todas las celdas en general.

La otra tabla tendría este código.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">
<tr><td class="estilocelda">Título de sección</td></tr>
</table>
<table width="280" cellpadding="2" cellspacing="2"><tr><td>
Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título.
</td></tr></table>

En este caso utilizamos dos tablas para hacer el efecto. La tabla de arriba tiene un borde y la de abajo no. Para ello aplicamos la clase definida para la tabla y la celda solamente en la tabla de arriba, así el borde definido en la declaración de estilos sólo afecta a la tabla de arriba.

Podemos ver el resultado en una página aparte.