Skip to main content

O que você deve saber sobre tabelas aninhadas

Adição de Frutas na Cerveja | Concerveja (136/365) (Abril 2025)

Adição de Frutas na Cerveja | Concerveja (136/365) (Abril 2025)
Anonim

As páginas da Web precisam ser baixadas rapidamente, mas as tabelas aninhadas podem retardar o processo. Não deixe que ninguém lhe diga que mais pessoas usam banda larga ou Internet de alta velocidade, para que você não precise se preocupar com a rapidez com que suas páginas são carregadas. Com a quantidade de conteúdo na Web, uma página ou site que carrega lentamente terá menos visitantes do que um que carrega rapidamente. A velocidade é muito importante.

O que é uma tabela aninhada?

Uma tabela aninhada é uma tabela HTML que possui outra tabela dentro dela. Por exemplo:

Coluna 1Coluna 2Coluna 3
Coluna 1
coluna da tabela aninhada 1coluna da tabela aninhada 2
Coluna 3
Coluna 1Coluna 2Coluna 3

Tabelas aninhadas fazem com que as páginas sejam baixadas mais lentamente

Uma única tabela em uma página da Web não fará com que a página seja baixada mais lentamente (dentro do razoável). Mas no momento em que você coloca uma tabela dentro de outra tabela, fica mais complicado para o navegador renderizar, então a página carrega mais devagar. E quanto mais tabelas você aninhar dentro de uma outra, mais lenta a página será carregada.

Ao criar uma página com tabelas, lembre-se de que quanto mais tabelas estiverem nas tabelas, mais lenta a página será carregada. Normalmente, quando uma página é carregada, o navegador inicia na parte superior do HTML e o carrega sequencialmente pela página. No entanto, com tabelas aninhadas, ele precisa encontrar o final da tabela antes de exibir a coisa toda.

Tabelas para Layout

Você não deve usar tabelas para layout em suas páginas da Web. Eles quase sempre exigem que você use tabelas aninhadas, portanto, uma página da Web de layout de tabela será carregada mais lentamente do que o mesmo design renderizado em CSS.

Além disso, se você está tentando escrever XHTML válido, as tabelas não devem ser usadas para o layout. Tabelas são para dados tabulares (como planilhas), não para layout. Em vez disso, você deve usar CSS para layout - os designs CSS são renderizados mais rapidamente e ajudam a manter o XHTML válido.

Projetando Tabelas de Carregamento Mais Rápido

Se você criar uma tabela com várias linhas, ela poderá ser carregada com mais rapidez se você gravar cada linha como uma tabela separada. Por exemplo, você poderia escrever uma tabela como esta:

fileira superior
coluna esquerdacoluna da direita

Mas se você escrevesse a mesma tabela como duas tabelas, pareceria carregar mais rapidamente, porque o navegador renderizaria o primeiro e renderizaria o segundo, em vez de renderizar a tabela inteira de uma só vez. O truque é garantir que cada tabela tenha larguras e outros estilos idênticos (como preenchimento, margens e bordas).

fileira superior
coluna esquerdacoluna da direita

Convertendo Tabelas Aninhadas em uma Tabela

Você pode sentir que tudo isso é uma boa informação, mas você tem uma tabela que devo tem outra tabela aninhada nela. Embora isso possa ser verdade, muitas vezes é possível converter tabelas aninhadas em tabelas únicas um pouco mais complexas usando os atributos e nas células da tabela. Por exemplo, na tabela aninhada no topo, posso converter isso em uma única tabela com apenas colspan atributo:

colspan = "2" > Coluna 2 colspan = "2" > Coluna 2
Coluna 1Coluna 3
Coluna 1coluna da tabela aninhada 1coluna da tabela aninhada 2Coluna 3
Coluna 1Coluna 3

Essa tabela também tem a vantagem de usar menos caracteres do que a tabela aninhada, portanto, ela será baixada mais rapidamente por causa disso também.