Elemento <div> em vez de <table>?

Question

Duplicado de:

• Por que não usar tabelas para layout em HTML?
• DIV’s vs Tabelas ou CSS vs.Sendo estúpido

---

Ultimamente tem-se falado muito sobre usar tags div em vez de tags de tabela para tornar suas páginas mais amigáveis ​​ao navegador.Por que div é melhor?

Answer 1

Algumas razões:

1) Div é mais semanticamente correto na maioria dos casos. As pessoas que codificam seus sites na estrutura da tabela não estão usando tabelas para o que são feitas, que são dados tabulares. As divs representam uma "divisão" ou uma seção da página, portanto, colocar itens no Divs é mais correto.

2) As divs são mais flexíveis e mais fáceis de estilizar e manter. Você não tem que escrever <table><tr><td>Text here</td></tr></table> toda vez que você quiser dizer algo quando você pode apenas escrever <div>Text here</div> em vez de. Você pode adicionar ganchos CSS (ou seja, classes ou elementos) às tabelas e divs, mas com o Divs é infinitamente mais flexível.

3) Os sites estruturados da mesa são simplesmente feios :)

Answer 2

O ponto principal aqui é usá-los para layout.Não há nada de errado com tabelas para tabelas dados, lembre-se.É para isso que servem.

Mas quando você usa tabelas para layout, você cria uma estrutura de página muito rígida que geralmente não funciona bem com diferentes tamanhos de tela, agentes de usuário (pense em navegadores móveis ou leitores de tela para pessoas cegas).Especialmente neste último caso você está destruindo qualquer ordem em que o conteúdo deveria ser lido para o usuário).Infelizmente, as tabelas ainda são um dos mecanismos mais robustos para criar o layout de uma página, uma vez que quase não existem implementações diferentes e funcionam perfeitamente há mais de uma década – CSS é uma questão totalmente diferente aqui.

Mas basicamente tudo se resume a isto:

Tabelas

• violar a distinção de conteúdo e apresentação
• são difíceis de manejar e insustentáveis ​​a longo prazo, especialmente ao tentar alterar o layout de várias páginas de maneira semelhante
• não têm um significado semântico forte, o que é importante para pessoas com deficiência que podem confiar apenas em texto lido em voz alta.As tabelas são lidas aqui linha por linha, coluna por coluna, o que quase sempre não é muito útil em layouts baseados em tabelas

Layout CSS

• é mais difícil de acertar (pelo menos para apresentação)
• permite (às vezes) uma separação clara entre conteúdo e apresentação.Observe que às vezes você precisa usar vários elementos de contêiner em HTML para permitir que alguns layouts e estilos funcionem corretamente, já que o CSS tem algumas limitações
• permite um melhor significado semântico da marcação subjacente se você não usa cegamente <div> e <span>.Existem muitas tags que têm um significado e devem ser usadas como tal.Por exemplo, não use <div class="heading1"> quando você poderia usar <h1>.

Answer 3

Como uma tabela transmite um significado semântico - sendo que você está exibindo dados tabulares como H1 significa que você tem um título. Portanto, se você usar tabelas para formatar sua saída, está enganando a interpretação da semântica do seu código.

Isso pode, por exemplo, levar a problemas de acessibilidade para as pessoas que usam um leitor de tela.

Answer 4

Aqui está o Prós e contras do design baseado em DIV e baseado em tabela.

Answer 5

O uso do div é melhor do que usar a tabela devido ao controle fácil do design e pode ser contêiner para controles do que a tabela e a tabela é usada para agrupar dados com estrutura simillar, por isso o design é para esta tarefa, mas o div é considerado como contêiner principalmente do que a tabela. Encontrei a diferença entre reunir muitos controles e, no eu posso controlar o contêiner, mas na tabela fiquei confuso porque tenho que inserir dentro e seu loop dentro um do outro.

Answer 6

A maioria das pessoas continua sobre como a tabela deve ser usada apenas para dados e introduz o problema de desempenho quando você o usa para fins de layout. Além disso, deve ser mais flexível porque você pode fazeru003Cdiv> flua para a esquerda, flua para a direita e flua em qualquer outro lugar.

No entanto, IMHO não vale o esforço. Especialmente quando você tem colunas de controles que devem se alinhar corretamente com os rótulos correspondentes, leva muito tempo para fazer com que as coisas se alinhem corretamente.

Answer 7

O uso de tabelas para o layout foi revolucionário para o web design, mas isso foi há quinze anos e não havia outras alternativas. É por causa dessa história que as tabelas são consideradas para o layout hoje.

O layout baseado em CSS é muito mais flexível que o layout baseado em tabela. Ainda existem algumas coisas mais fáceis de realizar com as tabelas, mas, por outro lado, há muitas coisas que são muito fáceis de fazer com o CSS que é muito complicado ou impossível de fazer com as tabelas.

Answer 8

Eu te digo meus principais motivos pessoais para usar o Divs:

• As tabelas têm apenas uma grade estática, enquanto as divs são dinâmicas: a primeira linha de uma tabela define todos os cols (como no MS Excel). Nas próximas linhas, você pode combinar esses cols, mas não pode alterar o layout básico que definiu em sua primeira linha. As divs são dinâmicas: você pode criar uma colcha de retalhos, permitindo que o DIVS se sobreponha ou coloque algum espaço entre. O que você quiser. Você não é forçado a pensar em linhas. Você é livre. Muito mais flexibilidade.

• As tabelas causam problemas de incompatibilidade de renderização e navegador transversal: as tabelas não parecem sempre idênticas. Cada navegador fornece sua própria interpretação da tabela e seu conteúdo. Assim, muitas surpresas desconfortáveis. Um navegador mostra seu texto regular como fonte em negrito. Outro navegador dá à sua mesa mais ou menos margem para outros elementos HTML, portanto, as tabelas não estão bem posicionadas. São horas de trabalho para corrigir esses problemas com soluções alternativas complicadas. As divs sempre parecem iguais em todos os navegadores. Até o IE (que é conhecido como um causador de problemas com os programadores da Web) está causando menos problemas se você estiver usando o Divs.

• Os divs renderizam mais rápido: os divs carregam mais rápido que as tabelas. Navegação mais rápida entre as páginas. Melhor olhar e sentir.

Espero que ajude. Felicidades.

Answer 9

Estou usando CSS e Tabelas e, às vezes, divs, mas as mesas são tão abrangentes! E eles parecem tão legais em Dreamweaver, FrontPage ... é tão difícil desistir de mesas, mas parece que eu vou, porque é necessário fazer minhas páginas carregarem mais rápido!