:: 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!

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Criado em: 2004-06-01