Para dar distintos efeitos a elementos estruturados, como as tabelas, podemos recorrer às classes, parte integrante das folhas de estilo (CSS).

Veremos agora outra maneira de utilizar as CSS (folhas de estilo cascata) para criar um estilo que podemos utilizar em HTML. É um estilo para realizar as bordas das tabelas com linhas pontilhadas, que aliás é bastante original porém nosso conselho é não abusar muito disso.

Para conseguir isso, simplesmente temos que utilizar a propriedade de CSS "border-style", atribuindo o valor "dotted", que quer dizer pontilhado em inglês. Ademais, podemos definir outros valores ao estilo de borda pontilhada, como pode ser a cor da borda ou a cor de fundo da tabela.

Para este exercício definimos uma classe que aplicaremos às tabelas ou a outros elementos que desejamos que tenham a borda pontilhada.

Nota: Uma classe é uma declaração de estilo que podemos utilizar em qualquer elemento de uma página. Para isso, inclui-se o atributo class="nome_classe" na etiqueta HTML que desejamos que tenha tal estilo.

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

Esta classe tem uma série de atributos de estilos definidos. Desde o primeiro até o último são: tipo de borda, largura da borda, cor da borda, cor de fundo, tipo de letra e tamanho da fonte. O atributo que nos interessa é o primeiro, no qual se indica que se deseja um tipo de borda pontilhado.

Para utilizar o estilo temos que atribuir a um elemento de HMTL a classe gerada anteriormente. Para isso, utilizamos o atributo class de HTML. Tal como foi definida a classe pode-se utilizar em qualquer elemento da página web, como uma tabela ou uma célula.

<table class="pontilhado" width=80% align="center">
<tr>
<td>
<b>Isto é um texto</b>
<br>
Coloco para ver como fica. Com certeza, vou gostar! E vocês também!
</td>
</tr>
</table>

Neste exemplo, toda a tabela terá um efeito de borda pontilhada. Se colocássemos essa classe unicamente em uma célula, somente essa célula teria a borda pontilhada. É o caso do seguinte exemplo:

<table width=300>
<tr>
<td class= "pontilhado"><b>Título da tabela</b></td>
</tr>
<tr>
<td>

Aqui poderíamos colocar qualquer coisa. Seria como o corpo da tabela que corresponderia com o titular que teria algum estilo legal.

</td>
</tr>
</table>

Não abusar do uso das bordas pontilhadas

As bordas com linhas pontilhadas podem ser muito úteis e vistosas, mas se exageramos em sua utilização pode acontecer do efeito ficar pouco agradável.

A borda pontilhada chama a atenção sobre o elemento que a utiliza, porém provoca uma sensação de instabilidade. Também dá a impressão de que não está terminado ou que não está integrado com o resto do desenho.