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 líneas 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 versión 6. En Mozilla también se pueden ver los bordes punteados, pero el punto es mucho más fino, por lo que el efecto queda más discreto.

Para conseguirlo simplemente tenemos que utilizar la propiedad de CSS "border-style", asignando el valor "dotted", que quiere decir punteado en inglés. Además, 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 práctico hemos definido una clase que aplicaremos a las tablas u otros elementos que deseemos que tengan el borde punteado.

Nota: una clase es una declaración de estilo que podemos utilizar en cualquier elemento de una página. Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho estilo. Podemos aprender más 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 tamaño 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 página 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 también.
  </td>
</tr>
</table>

En este ejemplo, toda la tabla tendrá un efecto de borde punteado. Si colocásemos esa clase únicamente en una celda, sólo esa celda tendría el borde punteado. Es el caso del ejemplo siguiente:

<table width=300>
<tr>
  <td class="punteado"><b>Título de la tabla</b></td>
</tr>
<tr>
  <td>
   Aquí podríamos poner cualquier cosa. Sería como el cuerpo de la tabla que correspondiese con el titular que sí tendría algún estilo majete.
  </td>
</tr>
</table>

Estos dos ejemplos se pueden ver en una página aparte, que incluye también una tercera propuesta de uso del estilo de borde punteado.

No abusar del uso de los bordes punteados

Los bordes con líneas punteadas pueden ser muy útiles y vistosos, pero si nos pasamos en su utilización puede darse el caso que el efecto quede poco agradable.

El borde punteado llama la atención sobre el elemento que lo utiliza, aunque provoca una sensación de inestabilidad. También hace que parezca que no está terminado, o bien, no está integrado con el resto del diseño.