Ir para conteúdo / Skip to content

Renderização mais rápida das Tabelas com CSS

Postado em: 28 de março de 2008 por Pedro Rogério

Caso você tenha que utilizar tabelas em seu site, quando se trata realmente de uma tabela, é conveniente ter em conta que existe uma propriedade no CSS não muito utilizada que pode melhorar e muito a renderização de nossas tabelas.

A propriedade se chama table-layout e nos permite indicar se queremos que a tabela tenha o seu fluxo com o tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo:


.fixed_table {
    table-layout: fixed;
}

.auto_table {
    table-layout: auto;
}

O valor fixed nos permite renderizar a tabela de uma forma mais rápida, já que o tamanho das celulas depende das colunas, e não do conteúdo, por isso a renderização é mais rápida. Ótimo para se utilizar em tabelas muito grandes e que possuem conteúdo muito parecido. Já o valor auto é dependente dos valores das células, por isso é necessário ler toda a tabela, se recomenda utilizar quando a tabela tem conteúdo muito variado.

Referências

Isso pode lhe interessar:

Deixe seu comentário

7 comentários para esse post

  1. Diogo disse: 28.03.08 ás 09:28
    #1

    Boa! Desta não sabia.

  2. Micox disse: 28.03.08 ás 09:33
    #2

    Interessante. Nunca lembrava dessa propriedade. |Muito bom.

  3. Ramon disse: 28.03.08 ás 11:03
    #3

    Essa vai pro meu caderninho de anotações!!!

  4. Eliseu sb disse: 30.03.08 ás 16:27
    #4

    E qual a diferença de setar essa propriedade “auto” e deixar a tabela sem width, height, ajustando sozinha de acordo com o conteúdo?

  5. Pedro Rogério disse: 30.03.08 ás 18:03
    #5

    @Eliseu,

    O próprio “auto” já explica, se você deixar sem altura e largura definida, as dimensões seriam definidas de acordo com o conteúdo!!!

  6. Eliseu sb disse: 30.03.08 ás 22:06
    #6

    Oi Pedro, nononono, voce não entendeu, digo que, a tabela sem as propriedades width e height, ela se auto-ajusta de acordo com o conteúdo, então porquê usaria um estilo que não faria a diferença? Gostaria de saber se tenho alguma vantagem relacionado a essa classe.

  7. Designer gráfico Demétrios Martins disse: 17.04.08 ás 10:08
    #7

    Boa dica, não sabia disto. é aconselhável utilizar sempre essas prioridades em todas as tabelas?

Deixe seu comentário