Table vs Tableless
To table or not to table? That's the question.
Usar ou não tabelas em uma página web depende do seu objetivo ao representar determinados dados.
Era uma vez a tag <table>
Como já foi mencionado em outras respostas, houve um tempo em que a maioria dos layouts de websites eram feitos usando tabelas.
Por exemplo, eram comum nas IDE's mais usadas, a exemplo do Dreamweaver, ter um wizard para criar layouts de sites. Veja o exemplo abaixo:

Então era comum começar um site pensando em quantas linhas ou colunas ele seria dividido para então encaixarmos todos os elementos. A grande vantagem de fazer layouts assim é que é lógico e intuitivo.
Porém, há muitas limitações em layouts com tabelas.
- Dor de cabeça quando um elemento precisa se sobrepor ao layout, como um submenu em lista.
- Adaptar o layout a dispositivos móveis.
- Renderização demorada, pois o navegador precisa ler a tabela até o final para mostrá-la corretamente.
- Código bagunçado, geralmente com tabelas dentro de tabelas dentro de tabelas dentro de tabelas...
E por aí vai...
Então surgiram div
s e span
s
Para sanar essas limitações, muitos webdesigners começaram a implementar layouts com blocos genéricos div
e span
aliados a técnicas de manipulação dos estilos CSS para gerar layouts mais flexíveis e responsivos.
Com o advento do HTML5, novas tags foram adicionadas para deixar ainda mais fácil a codificação ao adicionar semântica a determinados elementos da página. Algumas são: header
, footer
, section
e aside
. Elas estão exemplificadas no exemplo mais abaixo.
Diferente de uma tabela normal, onde cada célula deve obedecer aos padrões de posicionamento das tabelas os blocos são mais independentes. Cada bloco pode ser posicionado de forma independente, mas relativo aos outros blocos.
Veja o exemplo abaixo:

Isso parece a mesma coisa que uma tabelas, porém acaba com as limitações mencionadas acima.
No código HTML, o layout pode ser algo assim:
<body>
<header>
Meu cabeçalho
</header>
<aside class="esquerda">
Menu à esquerda
</aside>
<aside class="direita">
Menu à direita
</aside>
<section id="content">
Conteúdo da página.
</section>
<footer>
Meu rodapé
</footer>
</body>
Então as vantagens:
- Mais liberdade ao posicionar elementos, pois não é necessário seguir exatamente a grade de uma tabela.
- Em telas pequenas, por exemplo em celulares, os elementos podem ser dispostos um posições completamente diferentes de uma tela grande usando media queries do CSS.
- O navegador consegue exigir cada tag assim que recebe o conteúdo do navegador, então se sua página é composta por muitos dados eles serão exibidos aos poucos e não tudo de uma vez após uma longa demora inicial.
- Você pode dividir o código em diferentes seções e não fica tudo dentro de uma única tabela. Usando linguagens dinâmicas como PHP, JSP, ASP isso permite dividir o código em diversos arquivos de forma mais eficiente e evita quebrar o layout caso algum conteúdo maior do que o esperado seja escrito na página.
Claro, nem tudo são flores. No começo, criar um layout 100% tableless era uma grande dor de cabeça. O mais complicado era criar um código que funcionasse igual em todos os navegadores.
Porém, com o avanço da padronização do CSS, a evolução dos diversos navegadores e a consolidação de padrões de codificação de HTML e CSS, hoje é muito mais fácil fazer isso se você não quiser reinventar a roda.
Milhares e milhares de sites na internet disponibilizam exemplo de como fazer isso e ainda há bibliotecas como Foundation e Bootstrap que permitem reusar estilos já prontos para criar seu site.
Quando usar ou não tabelas
Se você tem dados que realmente são tabulares, como no caso de representar dados de um banco de dados, onde é importante que as colunas precisam estar sempre alinhadas, então tabelas são a solução mais ideal.
Por outro lado, imagine uma galeria de fotos. Num monitor mais largo você pode querer exibir 4 fotos por linha, mas ao diminuir o tamanho tabela, podem ser exibidas 3, 2 ou até 1 fotos, por exemplo em smartphones. Tabelas simplesmente não funcionam aqui.
Não pare por aqui
Uma dica para entender melhor como funciona isso é ir até a página do Bootstrap e ver como funciona o Grid System. Na mesma página, há um exemplo de uso da table.
Entendendo como funcionam os dois sistemas será mais fácil decidir quando usar um e outro.
table
, você verá que o site é uma grande tabela, onde o cabeçalho, corpo e rodapé sãotr
e cada coluna é umtd
. Agora, para exibição de dados, eu não vejo problema