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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

Criado em: 2004-06-01

topo