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.

O efeito que se busca é o seguinte:


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>

Estes dois exemplos podem ser vistos em uma página à parte que inclui também uma terceira proposta de uso do estilo da borda pontilhada. Clique aqui para ver o exemplo anexado.

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.