Bordes punteados con CSS

Para dar efectos distintos a elementos estructurados, como las tablas, podemos recurrir a las clases, parte integrante de las hojas de estilo (CSS).

Vamos a ver otra manera de utilizar las CSS (Hojas de Estilo en Cascada) para crear un estilo que podemos utilizar en tablas HTML. Es un estilo para realizar los bordes de tablas con lneas punteadas, lo que resulta bastante original, aunque nuestro consejo es no abusar de ello. El efecto buscado es el siguiente:

Nota: Para ver correctamente este efecto es necesario disponer de Internet Explorer versin 6. En Mozilla tambin se pueden ver los bordes punteados, pero el punto es mucho ms fino, por lo que el efecto queda ms discreto.

Para conseguirlo simplemente tenemos que utilizar la propiedad de CSS "borderstyle", asignando el valor "dotted", que quiere decir punteado en ingls. Adems, podemos definir otros valores al estilo de borde punteado, como puede ser el color del borde o el color de fondo de la tabla. Para este ejercicio prctico hemos definido una clase que aplicaremos a las tablas u otros elementos que deseemos que tengan el borde punteado.
Nota: una clase es una declaracin de estilo que podemos utilizar en cualquier elemento de una pgina. Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho estilo. Podemos aprender ms sobre clases y estilos CSS en el manual de Hojas de Estilo en Cascada. http://www.desarrolloweb.com/manuales/2

<style type="text/css"> .punteado{ border-style: dotted; border-width: 1px; border-color: 660033; background-color: cc3366; font-family: verdana, arial; font-size: 10pt; } </style>

Esta clase tiene definidos una serie de atributos de estilos. Desde el primero hasta el ltimo son: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamao de la fuente. El atributo que nos interesa a nosotros es el primero, en el que se indica que se desea un tipo de borde punteado. Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha

definido la clase se puede utilizar en cualquier elemento de la pgina web, como una tabla o una celda.
<table class="punteado" width=80% align="center"> <tr> <td> <b>Esto es un texto</b> <br> Lo pongo para ver como queda. Me gustar seguro! y a vosotros tambin. </td> </tr> </table>

En este ejemplo, toda la tabla tendr un efecto de borde punteado. Si colocsemos esa clase nicamente en una celda, slo esa celda tendra el borde punteado. Es el caso del ejemplo siguiente:
<table width=300> <tr> <td class="punteado"><b>Ttulo de la tabla</b></td> </tr> <tr> <td> Aqu podramos poner cualquier cosa. Sera como el cuerpo de la tabla que correspondiese con el titular que s tendra algn estilo majete. </td> </tr> </table>

Estos dos ejemplos se pueden ver en una pgina aparte, que incluye tambin una tercera propuesta de uso del estilo de borde punteado. No abusar del uso de los bordes punteados Los bordes con lneas punteadas pueden ser muy tiles y vistosos, pero si nos pasamos en su utilizacin puede darse el caso que el efecto quede poco agradable. El borde punteado llama la atencin sobre el elemento que lo utiliza, aunque provoca una sensacin de inestabilidad. Tambin hace que parezca que no est terminado, o bien, no est integrado con el resto del diseo.