Tableless
Tabelas existem em HTML por um único motivo: Para exibir dados tabulares. Mas, em seguida, com o border="0"
tornou-se possível para designers ter uma grade sobre a qual colocar imagens e texto. sendo assim, projetar sites Web visualmente ricos, o uso de tabelas é na verdade, uma forma de interferir com o desenvolvimento de uma Web melhor, mais acessível, flexível e funcional. Vamos ver quais os problemas:
Inicio
No início, a Internet era essencialmente um meio para acadêmicos, pesquisadores, e militares para compartilhar informações. No entanto, não demorou muito para que os visionários empresariais perceberem que este novo meio de comunicação era o ideal para vender tudo, desde produtos frescos e cachorro-quente.
No entanto, como qualquer coisa em sua infância, a Internet no início era esteticamente 'cru' (e não era atraente para os consumidores) até que David Siegel publicou seu livro de referência, que ofereceu algumas soluções brilhantes para as limitações dos navegadores existentes e especificações do W3C.
Problemas com Tables
- Mistura dados de apresentação com o conteúdo.
- Isso faz com que tamanho de suas páginas fique desnecessariamente grandes, com isso, os usuários precisam baixar esses dados de apresentação toda vez que visitar a página.
- Banda não é infinita, aliás, é bem escasso.
- Isso faz com que redesenhar sites existentes e adicionar conteúdo, se torne um trabalho extremamente difícil (e caro).
- Isso também faz com que seja extremamente difícil (e caro) manter a consistência visual completa de todas as páginas de um site.
- Páginas baseada em tabela também são muito menos acessível usando smartphones.
Melhor prática
Web-browsers modernos seguem os padrões Web e nós não precisamos usar esses métodos arcaicos mais para a construção de páginas.
Em vez de tabelas dentro de tabelas, causando um problema enorme para tratar depois, podemos usar CSS para definir posições e são mais rápidos para carregar, mais fácil para redesenhar, e mais acessível a todos.
Utilize table
somente onde você tem certeza que é uma table
Onde utilizar então?
Devemos utilizar com data tabular a tag table. Pense como se fosse um excel, normalmente dados representados no excel, são dados tabulares, segue um exemplo:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:100%">
<caption>Economia mensal</caption>
<tr>
<th>Mês</th>
<th>Economizado</th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$ 100</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>R$ 50</td>
</tr>
</table>
colspan
em uma das células da primeira linha.tableless
eu dira que é inapropriado