:: Bordas de tabelas e células com CSS ::

Introdução

Neste tutorial vou mostrar como "transformar" as bordas das células das tabelas, de bordas duplas para bordas simples com CSS. Observe o HTML abaixo: 

<table width="300px" border="1px" bordercolor="#FF0000"> 
<tr> 
    <td>cel 1-1</td>
    <td>cel 2-1</td>
    <td>cel 3-1</td>
</tr>
<tr> 
    <td>cel 1-2</td>
    <td>cel 2-2</td>
    <td>cel 3-2</td>
</tr>
<tr> 
    <td>cel 1-3</td>
    <td>cel 2-3</td>
    <td>cel 3-3</td>
</tr>
</table>

Trata-se de uma tabela com três linhas e três colunas a qual atruimos uma borda de 1px na cor vermelha. Veja como o browser renderiza a tabela:

Uma tabela com bordas duplas

A propriedade CSS que faz a "mágica" é border-collapse aplicada no elemento HTML <table>:

Então basta definir uma classe .bordasimples por exemplo e aplicá-la ao elemento <table> assim:.

table.bordasimples {border-collapse: collapse;}

table.bordasimples tr td {border:1px solid #FF0000;}

E no HTML agora você pode retirar a declaração da borda que passou para as CSS. 

<table width="300px" class="bordasimples">
<tr>
<td>
......

E o resultado no browser é este:

Uma tabela com bordas simples

Transformada a borda dupla em simples!

Última modificação: 2008/05/3 09:06:58 GMT

Criado em: 2004-06-01

banner clickmaujor
ir topo