Bordas personalizadas para tabelas
Publicado em: 28/04/2004Finalidade
Neste tutorial vamos estudar uma técnica para colocar bordas personalizadas em tabelas. Podemos criar diversas formas ou gráficos em um editor de imagens e aplicá-las como bordas de nossas tabela.
Nota: Lembre-se que em projetos CSS é válido usar-se tabelas, desde que na sua forma mais elementar e para descrição de dados, mas você poderá incrementar seu visual com CSS de forma simples como esta que iremos estudar.
A tabela pronta
Abaixo uma tabela com duas linhas e duas colunas na qual coloquei como borda da tabela uma figurinha "smiles" em fundo cinza claro.
Para incrementar coloquei uma borda sólida azul média e um fundo azul claro em cada célula da tabela.
| CÉLULA 1-1 | CÉLULA 1-2 |
| CÉLULA 2-1 | CÉLULA 2-2 |
A borda personalizada
Crie uma figurinha para servir de borda personalizada.
No caso deste tutorial criei um smile de 15x15 pixels em uma tela de 20 x 20 pixels com fundo cinza claro.
Esta e a figura que usei: 
Para fazer o download da figurinha clique com o botão direito do mouse sobre ela e no menu de contexto escolha "Salvar figura como..."
Como funciona
A colocação da borda personalizada é possível graças ao atributo cellspacing das tabelas.
É no cellspacing da tabela que será colocada a figura como fundo, para obter o efeito.
O que é o cellspacing ?
É a distância (medida em pixel) entre uma célula e as células adjacentes de uma tabela. Este valor em pixel de cellspacing é definido dentro da tag <table>. Por exemplo: <table cellspacing=20>
Mostro abaixo três tabelas com cellspacing 0 (zero) 15px e 25px para você relembrar o que é cellspacing.
Tabela com cellspacing=0
| célula 1-1 | célula 1-2 |
| célula 2-1 | célula 2-2 |
Tabela com cellspacing=15
| célula 1-1 | célula 1-2 |
| célula 2-1 | célula 2-2 |
Tabela com cellspacing=25
| célula 1-1 | célula 1-2 |
| célula 2-1 | célula 2-2 |
Os fundos
Se você definir um fundo para a tabela ele irá preencher todo o retângulo da tabela.
Veja abaixo uma tabela com o fundo smiles:
| CÉLULA 1-1 | CÉLULA 1-2 |
| CÉLULA 2-1 | CÉLULA 2-2 |
Agora veja o que acontence se você define um fundo branco para as células, mas não retira o fundo smiles da tabela:
| CÉLULA 1-1 | CÉLULA 1-2 |
| CÉLULA 2-1 | CÉLULA 2-2 |
Agora veja o que acontence se você define um cellspacing=20 para a tabela! O cellspacing deixa a mostra o fundo da tabela (o smiles)
| CÉLULA 1-1 | CÉLULA 1-2 |
| CÉLULA 2-1 | CÉLULA 2-2 |
Legal né? Nestas tabelas acima coloquei cores diferentes da primeira tabela para facilitar a visualização .
Um toque final
Para incrementar coloquei uma borda e um fundo coloridos nas células da tabela que apresentei la no começo do tutorial.
Nota: Esta técnica de personalização de bordas de uma tabela exige que você "quebre a cuca" quando for definir o tamanho da figurinha de fundo, para compatibilizá-la com a largura do cellpadding.
Nem sempre é imediato você chegar a um resultado que dê certinho as figurinhas sem quebras (enquadradas certinhas) dentro do cellspacing. Mas com um pouco de paciência você obtém resultados bem legais. Considere também criar uma figurinha bem pequena que se repita dentro do cellspacing, por exemplo com dimensões iguais a metade do cellspacing, mas atenção para não criar uma figurinha tão pequena que seja imperceptível quando renderizada.
Votos de boas descobertas.
O código completo
A seguir o código completo de uma página com a tabela deste tutorial. Se você for usar o código (copiar-colar) para seus estudos não se esqueça de fazer o download da figurinha smiles e colocá-la no mesmo diretório da página.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Tabela com borda personalizada</title>
<style type="text/css">
<!--
.bordaum {background:#cccccc url(smile.gif);}
.bordaum td {background:#f0ffff; border:10px solid #87ceeb;}
-->
</style>
</head>
<body>
<table class="bordaum" cellspacing="20" width="260">
<tr>
<td><p>célula 1-1 </p>
</td>
<td><p>célula 1-2</p>
</td>
</tr>
<tr>
<td><p>célula 2-1 </p>
</td>
<td><p>célula2-2</p>
</td>
</tr>
</table>
</body>
</html>
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
