DIVs vs. TABLEs uma refutação por favor

Há muitas pessoas perguntando "por que não devemos usar tabelas para estruturar nosso HTML" e, enquanto muitas respostas chegam, raramente vejo alguém sendo convertido para o mundo da semântica. Dito isso, ainda estou para ver qualquer refutação convincente para apoiar a razão pela qual deveríamos (ou poderíamos) usar tabelas.

Alguém se importa em oferecer uma justificativa para quando as tabelas são marcações estruturais válidas?


7 de novembro de 2008

Considerando que essa questão não foi embora como eu pensei que seria, suponho que seria melhor esclarecer minha pergunta e explicar sua existência.

Por causa da frustração de ter lido o argumento "as mesas são mais fáceis" muitas vezes depois da pergunta "DIVs vs. TABLEs", eu queria expor um pouco mais a questão e não deixar os amantes da mesa se livrarem tão facilmente.

Cada um para os seus outros pode dizer, mas eu estou sempre recebendo algum aplicativo para colocar em nossos sites que foi criado por algumas "mesas são mais fáceis" desenvolvedor que despeja um pedaço de HTML de baixa qualidade em minhas páginas, e para ser honesto, eu Só não estou vendo o suficiente dos amantes da mesa ouvindo os argumentos.

Alguém usa o Mambo no passado? Alguém teve que dar um pulo em colocar um design no topo do Sharepoint da Microsoft? Ter que lutar contra o seu caminho através de toda essa porcaria de mesa aninhada era o inferno, e considerando que isso foi escrito por alguns codificadores malditos me irrita. A marcação semântica razoável existe há tempo suficiente para que não haja razão para os desenvolvedores continuarem defendendo que "as tabelas são mais fáceis". Tabelas não são mais fáceis - elas são preguiçosas!

Minha pergunta merecia o representante negativo pela forma negativa em que foi apresentada, mas ainda estou esperando que as pessoas aceitem que a única razão pela qual usam tabelas é porque NÃO SABEM HTML. Porque se o fizessem, então eles entenderiam, como diz jjrv, que as tabelas são para dados tabulares.

0
adicionado editado
Visualizações: 2
Por favor, faça perguntas que possam ser respondidas, e não apenas discutidas (na página Pergunte a Pergunta)
adicionado o autor Peter Hilton, fonte
Eu já vi muitas perguntas sobre o nível inferior: sua pergunta inspirou ótimas respostas (algumas das quais chegaram a +13), mas ficaram prontas em -6. Por favor, evite esta pobre pergunta!
adicionado o autor Dan Rosenstark, fonte
Concordo com @AviewAnew - esta pergunta é estranha, dada a sua resposta a este mesmo tópico ontem.
adicionado o autor delfuego, fonte

9 Respostas

Tabelas são para desenvolvedores que não podem ser incomodados a mexer em horas com CSS para obter dois divs adjacentes em colunas para expandir para 100% altura e largura, independentemente do conteúdo, e então obter o hack para trabalhar em todos os navegadores sem adicionar extras invólucros div e, finalmente, em frustração absoluta </​​em>, eles recorrem à correção de 5 segundos:

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

A dura verdade é que a maioria dos usuários (excluindo aqueles que usam leitores de tela) realmente não se importam com a forma como a página é marcada, desde que seja carregada rapidamente.

Os desenvolvedores têm restrições de orçamento e tempo, e CSS e marcação "bons" levam tempo.

O fato de que há uma infinidade de recursos na web explicando em detalhes laboriosos como você pode alinhar dois divs para substituir essa tabela simples, diz claramente para mim que esse design é inerentemente tão falho quanto tabelas. Quantos tutoriais são necessários para explicar como adicionar uma tabela com duas colunas a uma página ?

O HTML5 deve nos trazer alguma sanidade com as novas tags de cabeçalho, rodapé, seção, navegação e de lado. Exemplo retirado do Nettuts +:

<div id="content">
    <div id="mainContent">
        
<!-- Blog post -->
 
        
<!-- Comments -->
 
        <form>
            <!-- Comment form -->
        </form>
    </div>
    
 
</div>

e então isso para o CSS:

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

Aqueles de você com um olho afiado vão adorar o senso de ironia, quando você perceber que o CSS tem as propriedades: display: table; e display: table-cell; .

As mesas estão de volta baby! Esgueirar-se pela porta traseira do HTML5; -)

0
adicionado
display: table e display: table-cell não tem nada a ver com HTML5 e já existe há algum tempo (embora não seja bem implementado).
adicionado o autor Matt Sach, fonte

Tabelas são válidas quando você tem uma tabela de dados. Eu vi widgets de grade interativa onde eles fazem de tudo para usar um monte de divs para evitar a tag de tabela temida. Quando são dados tabulares, crie uma tabela.

Uma visão mais controversa é a de que quando você tem problemas para lidar com problemas de layout vertical em CSS, você pode simplesmente usar uma tabela e, muitas vezes, resolvê-la imediatamente. Não é tão bonito quanto deveria ser, misturando conteúdo com apresentação, mas ele faz o trabalho e evita hacks de CSS para contornar o IE.

0
adicionado

Tabelas são suportadas mesmo em navegadores antigos HTML v1.0. Se o seu mercado-alvo inclui pessoas que usam navegadores incorporados em telefones celulares dos anos 90, isso pode ser uma boa razão para usar as tabelas.

Muitos HTMLs gerados automaticamente usam tabelas. Se o seu código precisa interagir ou incluir essas tabelas, seria melhor procurar consistência.

0
adicionado
O ponto principal da marcação semântica e do CSS é que a sua página ainda fará sentido, mesmo em um antigo navegador HTML v1. Tabelas lhe darão inconsistências e pesadelos. Cabeçalhos agradáveis, parágrafos e tal lhe dará um pae estruturado agradável que faz sentido perfeito.
adicionado o autor roryf, fonte
Tabelas não foram adicionadas ao HTML até o HTML 3.2.
adicionado o autor Jim, fonte

Eu diria que o jjrv está certo, pois as tabelas são excelentes para dados tabulares, fazer de tudo para "trabalhar" como uma tabela, em vez de usar apenas uma tabela, é um limite retardado.

Se você se preocupa com os padrões e se move em direção a uma implementação sólida em todos os navegadores, a maioria de sua marcação deve estar em layouts líquidos sem tabela ... e seus dados tabulares estão em ... você adivinhou as tabelas!

Se você precisa atender a navegadores realmente antigos, isto é, antes do temido IE6, então você terá muitos problemas em CSS e, dadas as estatísticas atuais de uso, é seguro assumir que todos terão um navegador "moderno" que suporta layouts css.

Tudo isso dito e seus são momentos em que o seu bater a cabeça contra a parede em um layout e você quer/dizer f___ ele através dele em uma tabela e funciona. Espero que esta seja uma prática obsoleta, mas em um teste isso dá resultados previsíveis.

0
adicionado

Usar marcação semântica moderna é muito mais fácil quando você está adicionando recursos ou corrigindo bugs ou alterando a aparência de um site orientado a dados. Adicionar recursos AJAX ou qualquer tipo de script interativo funcionará muito melhor com DIVs e CSS do que com TABLEs.

Mudar para um gerenciador de conteúdo como o Drupal, o Joomla, o WordPress ou algo semelhante será muito mais fácil se você também estiver organizado com a marcação semântica.

As novas edições do navegador também suportarão a marcação moderna de maneira mais eficiente e seu site será exibido mais rapidamente. Reorganizar todas essas tabelas pode resultar em tempos de exibição lentos.

Por outro lado, as tabelas estão aqui para ficar. Algumas pessoas continuarão a usá-las e os navegadores continuarão a exibi-las. Não há nada de errado com a marcação não-semântica, se é isso que você quer. Um site completamente estático que nunca será alterado pode funcionar também com tabelas, como na marcação moderna.

Quanto à marcação estrutural válida, existe o seguinte: as tabelas são uma ótima maneira de exibir dados tabulares, como tabelas de bancos de dados ou planilhas. Eles não são realmente uma marcação válida para qualquer outra coisa.

0
adicionado

Use tabelas para o menor denominador comum html ou para dados tabulares em que faz sentido se estender por colunas ou linhas. Caso contrário, os layouts de CSS são muito menos detalhados e muito mais fáceis de manter quando você pega o jeito.

0
adicionado

Layouts baseados em DIV sofrem de limitações. Sem tabelas, é essencialmente impossível para implementar um layout de duas colunas que cresce corretamente com base na altura do conteúdo.

0
adicionado

Uma nota interessante está relacionada a aplicativos JavaScript altamente complexos. Se você escolher o Gmail ou o Google Agenda com o Firebug, verá que as tabelas são usadas extensivamente, mesmo para o layout. Concedido, eles geralmente são gerados dinamicamente, mas isso mostra que, em casos raros, algumas interfaces interativas muito visualmente complexas são extremamente difíceis de construir usando apenas DIVs.

0
adicionado

RE: Por que mesas?

Porque algumas pessoas estão (ainda, depois de todos esses anos) com medo de mudanças. Eles ouviram que usar HTML semântico é uma coisa boa (e geralmente não compreendem completamente o conceito). Então, eles tentam montar um layout usando CSS, nunca tendo feito isso antes. Eles se deparam com alguns problemas (bem documentados e geralmente fáceis de resolver), levantam as mãos e correm de volta para as mesas.

Eles então decidem que o CSS é "muito demorado" ("não estou disposto a gastar tempo para aprendê-lo") ou "não é prático" ("eu não entendo. É muito difícil") e que as tabelas são o único caminho verdadeiro. Através da teimosia e da ignorância, eles acreditam em suas próprias dificuldades e convencem seus clientes e colegas.

E seu mundo permanece feliz e inalterado, desaparecendo mais no passado e mais profundamente na obsolescência *

E isso é "por que tabelas". O fim.

(* exceto que eles são adequados para codificação de emails em HTML)

0
adicionado