ir para conteúdo

Gustavo Ribeiro - Tableless, Acessibilidade e SEO

Sep 25

CSS: Border-Collapse

Meta Tags: ,

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>
célula 1 célula 2 célula 3

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>
célula 1 célula 2 célula 3

Outras dicas são bem vindas nos comentários ;)

Leia também

· · · · ·

2 comentários

  1. Cleo — September 25, 2008 @ 14:08

    Aeeww!!! ^^
    Muito booom…. melhor q agora eu não vou precisar te perguntar mais ^^

  2. LulaRibeiro — October 8, 2008 @ 11:14

    Fala Gustavo, valeu pela dica!
    Vou linkar você lá no meu blog!
    Abraço!

RSS feed for comments on this post. TrackBack URL

Seja o(a) primeiro(a) a comentar.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Categorias

  • Submarino