O que aconteceu com as tags de tabela HTML?

Comecei a codificar HTML em 1998 e, nessa época, usei muitas tags de tabela, jogando com tr e td, aprendi muitas coisas analisando o código fonte de muitos portais na internet com o bloco de notas e o Microsoft FrontPage, o último, aw, quantas mesas se sobrepunham a outras, foi divertido, eu amei esse tempo.

No entanto, abandonei a programação da web por quase sete anos e este ano decidi ver como é a programação da web hoje. Parece completamente diferente, pois a maioria dos sites não usa tags de tabela e, em vez disso, usa tags div e span.

Por quê isso aconteceu? O que são essas novas tags e por que as tags de tabela não são mais usadas?

O World Wide Web Consortium (W3C) desenvolveu a primeira especificação Cascading Style Sheets em dezembro de 1996. Desde então, as Cascading Style Sheets (CSS) evoluíram radicalmente e tornaram a separação do conteúdo HTML dos dados da apresentação mais comum entre sites populares.

Embora os sites atuais ainda possam contar com declarações de estilo em linha para obter os efeitos desejados, é muito mais eficiente incluir dados de apresentação (altura do elemento, largura, preenchimento, margens, posicionamento absoluto etc.) em um único arquivo CSS referenciado por vários HTML documentos do que atualizar todas as instâncias do conteúdo HTML quando a apresentação precisar ser alterada.

A adoção do CSS pelo navegador não ocorreu da noite para o dia (é por isso que alguns sites importantes ainda contam com tabelas para obter uma apresentação uniforme em vários navegadores até a década de 2000) e, enquanto alguns navegadores continuam a diferir na implementação das especificações CSS do W3C, gráficos navegadores que não suportam CSS1 são muito incomuns; portanto, poucos sites populares confiam em tabelas para obter uma apresentação compatível com vários navegadores.

O artigo 12 lições para quem tem medo de CSS e padrões (publicado em 2006) em A List Apart e uma revisão do CSS Snapshot do W3C podem ser um bom ponto de partida se você quiser acompanhar a transição dos layouts baseados em tabela para CSS.

Sem entrar em uma história completa da evolução dos desenvolvedores da Web ... As
tabelas nunca foram criadas para criar o layout da página; essa é a parte mais importante. Usá-los dessa maneira foi uma solução alternativa criada pela tecnologia da época, tanto especificações incompletas quanto navegadores incapazes. Eventualmente, esses problemas foram (principalmente) abordados e agora não é mais necessário.

Os sites de SE são geralmente para perguntas mais práticas, por exemplo. como é que eu ... mas se você quiser mais detalhes, muitos livros em HTML para iniciantes - e parece que você está começando tudo de novo - têm uma visão geral resumida do que você está perguntando como material introdutório.

As tabelas ainda existem na especificação html. Mas eles devem ser usados ​​para exibir dados em forma de tabela! (Embora a marcação da tabela tenha evoluído um pouco, os rótulos das colunas e dos grupos são mais fáceis de aplicar de maneira sensata).

Se você tiver fotos e conteúdo de notícias que deseja escrever para uma página da Web, fique longe das tabelas pelos motivos descritos por outras pessoas que responderam a essa pergunta.

Se você deseja exibir contas de meses em uma página, então, por todos os meios, você deve usar tabelas para fazer isso.

Não há ninguém, há alguns anos (e ainda assim, se você suporta o IE 6) as tabelas eram a melhor opção para afirmar o mesmo layout para todos os navegadores.

Estruturas que se recusavam a usar tabelas para fazer o layout, como Ext, terminavam o cálculo de dimensões dinamicamente através da alteração de estilos no redimensionamento, o que os fazia funcionar de buggy em alguns navegadores (IE 6 mencionado anteriormente).

As tabelas ainda são usadas como base para layouts de grade em várias estruturas (Icefaces, por exemplo).

Eu secretamente ainda os uso.

Mais importante ainda, eles ainda estão no HTML5: http://www.w3schools.com/html5/tag_table.asp . Portanto, é perfeitamente seguro usá-los para suas necessidades de layout distorcido.

Edit: (Depois de ter sido um pouco menos votado) Um ótimo exemplo de "necessidade de layout distorcido" é usar tabelas em seus e-mails em massa. Se você deseja que seu lixo eletrônico pareça tão sexy quanto o efeito prometido do seu produto, não poderá usar a maioria das CSS.

Eu nem sempre uso hacks sujos, mas quando eu prefiro hacks que durarão pelos próximos dez anos.