Modelo de tabelas com CSS

Os layouts devem ser Tableless e não os sites. Tabelas tem seu lugar, não no layout, mas sim para mostrar dados tabulares. Até para formulários de contato e de registro não é nenhum “pecado” usá-las. Posteriormente irei postar sobre a construção de formulários com CSS, sem tabelas para mostrar que não é tão difícil e é bastante versátil. Mas isto é para outra oportunidade. Aqui vou falar para quem decide estilizar tabelas totalmente por CSS e se depara com situações esquisitas. Quando você coloca a propriedade border na tabela, a borda circunda os limites desta, mas você quer que a tabela seja uma grade não é isso? Então você coloca borda nas células da tabela. Então surge uma borda tanto circundando a tabela, quanto dentro das células. O problema surge quando você observa o resultado. Se a borda da tabela está com 1px, por exemplo, e as céluas com 1px, haverá limites que a borda irá ter 2px, pois as bordas da célula irão se encontrar com as bordas da tabela e assim irão somar sua largura.

Desta vez não terá necessidade nem de ilustrar o resultado, pois isto é bastante claro e intuitivo, além de ser o comportamento de todos os browsers.

A propriedade border-collapse

A propriedade border-collapse define se as bordas em uma tabela vão se fundir ou vão ser separadas.

Colocando border-collapse: separate irá ter um comportamento como descrito acima, ou seja, se duas bordas se encontrarem, elas se somarão, aumentando sua largura. Este é o comportamento padrão dos browsers. No entanto, ao colocar border-collapse: collapse irá fazer com que dois pixels que se encontre, por exemplo, gere para o usuário apenas um pixel, o que é ideal quando se deseja construir uma tabela. Então para fazer uma tabela usual, como se fazia com html quando o atributo border era escolhido, deve se fazer o seguinte código:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  border: 1px solid black;
}

Com isso, a tabela ficará preenchida tanto nos contornos quanto nas células com uma borda de apenas 1 pixel, como esperado.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>