GustavoRibeiro.net

A propriedade border-collapse tem como objetivo dividir ou não as bordas das tabelas via CSS e possui os seguinte atributos: collapse e separate.

Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.

Exemplo de tabela com o atributo separate.

<table style="border:solid 1px #00f">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Exemplo de tabela com o atributo collapse.

<table style="border:solid 1px #00f;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Outras dicas são bem vindas nos comentários

A algum tempo atrás falei sobre a importância de se utilizar acrônimos em web sites e hoje vim falar sobre as abreviações <abbr>.

Abreviação já se auto-explica o que é então vou ser rápido e explicar a diferença entre abreviações e acrônimos.

Para muitos, ou até para a maioria, usuários internet tudo é abreviação mas na realidade não é a verdade. Acrônimos são palavras formadas por letras ou sílabas iniciais de uma locução - Ex.: CSS = Cascading Style Sheets - enquanto abreviação é uma forma curta da palavra excrita - Ex.: Av. = Avenida.

No xHTML, a utilização da tag abrr se dá na seguinte forma:

<abbr></abbr>

Para cada <abbr> gerado, é altamente recomendável, no meu ponto de vista obrigatório, o uso da propriedade <title> ao qual, com ela, podemos visualizar o significado daquele abreviação ao passarmos o mouse por cima da palavra.

<abbr title="Avenida">Av.</abbr>

Fazendo isso, estaremos ajudando a quem não tem o conhecimento de certas abreviações e faremos nossos sites mais acessíveis e de acordo com os padrões w3c.

[update: 25.07 às 10:21]
Aproveitando a dica da amiga Cleo Morgause que eu sempre acabo me esquecendo de fazer :), uma ótima pedida é mudarmos o cursor do mouse, ao passarmos por cima do <abbr>, para o ícone de help (ajuda).

abbr { cursor: help }

Os mais atualizados sabem, ou deveriam saber, muito bem que a tag <iframe> foi descontinuada quando utilizamos o DTD Strict em nossos sites. Uma forma usufruir da mesma funcionalidade e de uma maneira correta para o W3C é utilizando a tag <object>.

<object type="text/html" data="teste.php">
    <p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
</object>

Para variar, no IE temos que especificar qual classid é a do <object> para que ele possa funcionar, caso contrário ele não funcionará.

classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13"

Nosso código ficaria assim:

<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="teste.php">
    <p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
</object>