Aprendendo a escrever CSS layouts podem ser complicados, especialmente se você estiver familiarizado com o uso de tabelas para criar layouts de páginas da web sofisticados. Mas enquanto HTML5 permite tabelas para layout, não é uma boa ideia.
As tabelas não são acessíveis
Igual a motores de busca, a maioria dos leitores de tela lê as páginas da Web na ordem em que são exibidas no HTML e as tabelas podem ser muito difíceis de serem analisadas pelos leitores de tela. O conteúdo em um layout de tabela, embora linear, nem sempre faz sentido quando lido da esquerda para a direita e de cima para baixo. Além disso, com tabelas aninhadas e várias extensões nas células da tabela podem tornar a página difícil de descobrir.
Esta é a razão pela qual o Especificação HTML5 recomenda contra tabelas para layout e por que o HTML 4.01 não permite isso. As páginas da Web acessíveis permitem que mais pessoas as utilizem e são a marca de um designer profissional.
Com CSS, você pode definir uma seção como pertencente ao lado esquerdo da página, mas colocá-la por último no HTML. Em seguida, os leitores de tela e os mecanismos de pesquisa lerão as partes importantes (o conteúdo) primeiro e as partes menos importantes (navegação) por último.
As mesas são complicadas
Mesmo se você criar uma tabela com um editor da web, suas páginas da web ainda serão complicadas e difíceis de manter. Exceto para os designs de página da web mais simples, a maioria das tabelas de layout requer o uso de muitos atributos e tabelas aninhadas.
Construir a tabela pode parecer fácil enquanto você está fazendo isso, mas uma vez feito isso, você precisa mantê-la. Seis meses depois, pode não ser tão fácil lembrar por que você aninhou as tabelas ou quantas células estavam em uma linha e assim por diante. Sem mencionar que, se você mantém páginas da web como um membro da equipe, precisa explicar a todos os envolvidos como as tabelas funcionam ou esperar que levem mais tempo quando precisarem fazer alterações.
CSS também pode ser complicado, mas mantém a apresentação separada do conteúdo e torna-a muito mais fácil de manter a longo prazo. Além disso, com o layout CSS, você pode escrever um arquivo CSS e definir o estilo de todas as suas páginas para que tenham essa aparência. Então, quando você quiser mudar o layout do seu site, você simplesmente muda um arquivo CSS, e todo o mudanças no site - chega de passar por cada página, uma de cada vez, para atualizar as tabelas para atualizar o layout.
As tabelas são inflexíveis
Embora seja possível criar layouts de tabela com larguras percentuais, eles costumam ser mais lentos para carregar e podem alterar drasticamente a aparência do seu layout. Mas se você usar larguras específicas para suas tabelas, você acabará com um layout muito rígido que não ficará bem em monitores com tamanhos diferentes do seu.
Criar layouts flexíveis que tenham uma boa aparência em muitos monitores, navegadores e resoluções é relativamente fácil. Na verdade, com consultas de mídia CSS, você pode criar designs separados para telas de tamanhos diferentes.
As tabelas prejudicam a otimização do mecanismo de pesquisa
O layout mais comum criado por tabela usa uma barra de navegação no lado esquerdo da página e o conteúdo principal à direita. Ao usar tabelas, essa abordagem (geralmente) requer que o primeiro conteúdo exibido no HTML seja a barra de navegação à esquerda. Os mecanismos de pesquisa categorizam as páginas com base no conteúdo, e muitos mecanismos determinam que o conteúdo exibido na parte superior da página é mais importante do que outro conteúdo. Portanto, uma página com a navegação à esquerda primeiro parecerá ter conteúdo menos importante do que a navegação.
Usando CSS, você pode colocar o conteúdo importante primeiro em seu HTML e, em seguida, usar CSS para determinar onde ele deve ser colocado no design. Isso significa que os mecanismos de pesquisa verão o conteúdo importante primeiro, mesmo se o design o posicionar mais abaixo na página.
As tabelas nem sempre são impressas bem
Muitos designs de mesa não são impressos bem porque são largos demais para a impressora. Portanto, para torná-los adequados, os navegadores cortam as tabelas e imprimem as seções abaixo, resultando em páginas desarticuladas. Às vezes, você acaba com páginas que parecem boas, mas todo o lado direito está faltando. Outras páginas imprimirão seções em várias folhas.
Com CSS, você pode criar uma folha de estilo separada apenas para imprimir a página.
As tabelas para layout são inválidas em HTML 4.01
O Estados de especificação HTML 4: "As tabelas não devem ser usadas puramente como meio de fazer o layout do conteúdo do documento, pois isso pode apresentar problemas ao renderizar para mídia não visual."
Portanto, se você deseja escrever um HTML 4.01 válido, não pode usar tabelas para layout. Você só deve usar tabelas para dados tabulares, e os dados tabulares geralmente se parecem com algo que você pode exibir em uma planilha ou possivelmente em um banco de dados.
No entanto, o HTML5 mudou as regras e agora as tabelas de layout, embora não sejam recomendadas, são consideradas HTML válidas. A especificação HTML5 afirma: "As tabelas não devem ser usadas como auxiliares de layout." Isso ocorre porque as tabelas de layout são difíceis de serem diferenciadas pelos leitores de tela, conforme mencionado anteriormente.
Usar CSS para posicionar e fazer o layout de suas páginas é a única maneira válida do HTML 4.01 para obter os designs que você usou para criar tabelas, e o HTML5 também recomenda fortemente esse método.