Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Cellspacing e Cellpadding com Webstandards

    Falae galera, tranquilidade?

    Depois de ver algumas dúvidas, pessoas querendo saber sobre esse assunto, comecei a pesquisar, a mexer aqui no css e acabei descobrindo a forma de simular com webstandards, o cellpadding e cellspacing, atributos presentes na tag <table> que serve para a criação de tabelas.

    Veremos um exemplo disso com tabelas:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Este foi exemplo usando cellpadding e cellspacing iguais a 0 (zero). Na versão webstandards, eh bem fácil, com somente dois comandos no css, você consegue o mesmo resultado:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Os comandos css utilizados foram:
    border-collapse: collapse;
    padding: 0;

    A primeira linha diz que quero o modelo de borda fique zerado, naum tenha distância. A segunda linha nem preciso falar né? Ela zera o padding q eh o espaço do conteúdo pro seu limite.

    Dentro desse atributo border-collapse, temos outro valor, que é o default. Esse valor é o separate e ele será um dos usados no próximo exemplo:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Este foi exemplo usando cellpadding e cellspacing iguais a 10 (dez). Agora veremos na versão webstandards, que também eh bem fácil, com somente três comandos no css, você consegue o mesmo resultado para a tabela:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Os comandos css utilizados foram:
    border-collapse: separate;
    border-spacing: 10px;
    padding: 10px;

    Primeira linha foi explicado anteriormento, é o valor padrão, mantém um espaçamento entre as células e a tabela. A segunda, foi setado o espaçamento entre as células contidas na tabela que eu queria, nese caso, 10 pixels. A terceira eu setei um padding de 10 pixels.

    A propriedade border-spacing não é muito utilizada, talvez pela pouca utilização das tabelas hoje em dia, por isso, muitos não sabem sua funcionalidade.

    Mas Bruno, está diferente do feito com os atributos na tag <table>.

    Eu sei, calma. Precisamos lembrar, que estamos setando estes valores, para a tag <table> somente. Para ter o resultado semelhante, você precisaria colocar um padding também no <td>:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Às vezes o resultado não fica totalmente igual, principalmente em diferentes browsers, mas isso você pode ir resolvendo com valores diferenciados para cada item.

    Essa é uma grande vantagem do css. Você pode cuidar de cada tag, separadamente, dando à ela, os valores especificados por você.

    Vamos ver mais um exemplo com tabelas com bordas:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Mas Bruno, por que que entre os tds estão menores que entre a tabela e o td?

    Simples. Como setamos 10px de padding para tabela, todo seu conteúdo ficará 10 pixels mais pra dentro da tabela e somando os 10px setados no border-spacing, que é o espaçamento entre as células da tabela, como explicado lá em cima.

    Com isso, as células que ficam na primeira e última linha, ou coluna, ficam com 20px de espaçamentos pra tabela no topo, base e laterais, respectivamente. Isso por causa da soma dos dois valores 10px (border-spacing + padding).

    Legal não é verdade? Espero que tenham entendido e qualquer dúvida, erro, é só me mandar um email ou mandar um comentário.

    Aquele abraço.

    [UPDATE]

    Maldito i.e. Lembrando que ele não aceita esses parâmetros. Alguém tem dúvida sobre o porquê desse browser ser ruim?

    [UPDATE 02]

    Colocando o complemento do Samy para os iniciantes. Eu coloquei cada atributo em sua respectiva tag, eh soh ver no código fonte o style em cada tag, portanto, devemos seguir as seguinte regras:
    table {
    border-collapse: separate;
    border-spacing: 10px;
    }
    table tr td {
    padding:10px;
    }

    Aquele abraço e obrigado ae Samy.

    [ 24/mai/2006 às 16:04hrs ] [ Por Bruno Dulcetti ] Comentários 10 Comentários |

    Categorias: CSS,Webstandards

    10 Comentários no Post "Cellspacing e Cellpadding com Webstandards"

    Postar no Rec 6

    1. Ola Bruno,

      1-) As propriedades CSS que vc usou para simular cellspacing são das CSS 2.1 ainda sem suporte total pelos navegadores, por isso não funcionam no IE.
      Lamentavelmente esta falta de suporte impõe que continuemos usando o atributo cellspacing na tag <table>.
      Resumindo: atualmente não há como conseguir cellspacing via CSS, para o IE.

      2-) Faço duas observações para complementar o texto da matéria, pois a falta delas poderá confundir os iniciantes:
      2.1-) as declarações border-collapse e border-spacing devem ser feitas para o elemento table:
      table {
      border-collapse: separate;
      border-spacing: 10px;
      }

      2.2-) a declaração padding deve ser feita para o elemento td:
      table tr td {
      padding:10px;
      }

    2. falae Maurício. Verdade, confesso que pequei no aspecto da versão dessas propriedades.

      Boa complementação Sammy, pessoal iniciante pode acabar caindo nessa e esquecer desse detalhe. Vou complementar no post ;)

      aquele abraço.

    3. Bem legal, dessa aí eu não sabia!!!!

    4. Ótima matéria Bruno.

      Aproveitando o embalo, rolava de voce escrever um artigo sobre “bordeamento” de tabelas em tableless, que complica um pouco para os iniciantes.

      Té mais…

    5. Obrigado!

    6. Olá Bruno,
      gostei bastante da matéria! Parabéns e obrigado pq eu nem sabia oq era..
      Sou iniciante e gostaria de saber uma coisa
      Esses comandos (Cellspacing e Cellpadding)podem ser usandos com divs num podem? e cada qual com um valor diferente tbm num eh… como ficaria?!

    7. Eu testei e consegui nos dois navegadores!

    8. Mais um artigo sobre tabelas que pode ser útil para os visitantes que lerem os comentários: Tabelas: exibindo o cabeçalho em todas as páginas na impressão

    9. Muito bom… Simples e com informação muito útil…. Parabéns

    10. va se foder

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com