Títulos para tablas decorados con CSS

  • Por
Creación y aplicación de estilos con CSS para realizar tablas con una decoración vistosa pero fácil de aplicar.
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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

alexander

30/8/2007
coye esta chevere man pero sera que me pueden ayudar en algo, como hacer para que la tabla tenga las celdas unas aldo de la otra por ejemplo 6 celdas y colocar el ejemplo aver como queda agradeceria mucho su ayuda

Dario

27/6/2009
CSS NO FUNCIONA CON EXPLORER
El codigo anterior no resulta para ser utilizado con Explorer. Sólo una aclaracion

lomas

01/9/2009
las tablas
no consigo que me salgan las tablas salen la frase pero ni las lineas ni el color

rodolfolp

06/1/2011
Felicitaciones
Los felicito por tan buena web con tantos asuntos tan interesantes y necesarios
para los que nos gusta la web. Gracias