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.

E para uma opção barata de hospedagem para colocar o seu projeto você pode usar a Hostinger .

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *