Aprender a escrever layouts CSS pode ser complicado, especialmente se você estiver familiarizado com o uso de tabelas para criar layouts sofisticados de páginas da web. Mas enquanto HTML5 permite tabelas para layout, não é uma boa idéia.
Tabelas não são acessíveis
Assim como nos mecanismos de pesquisa, a maioria dos leitores de tela lê páginas da Web na ordem em que são exibidas no HTML, e as tabelas podem ser muito difíceis para os leitores de tela analisarem. Isso ocorre porque 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 muito difícil de descobrir.
Essa é a razão que a especificação HTML5 recomenda contra tabelas para layout e por que o HTML 4.01 não permite isso. Páginas web acessíveis permitem que mais pessoas as usem e são a marca de um designer profissional.
Com o CSS, você pode definir uma seção como pertencente no 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 tabelas são complicadas
Mesmo se você criar uma tabela com um editor da web, suas páginas da web ainda serão muito complicadas e difíceis de manter. Com exceção dos designs de página da Web mais simples, a maioria das tabelas de layout exige o uso de muitos atributos e de tabelas aninhadas.
Construir a mesa 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ê mantiver as páginas da Web como um membro da equipe, precisará explicar a todos os envolvidos como as tabelas funcionam ou esperar que elas demorem mais tempo quando precisarem fazer alterações.
CSS pode ser complicado também, mas mantém a apresentação separada do HTML e torna muito mais fácil manter a longo prazo. Além disso, com o layout CSS, você pode escrever um arquivo CSS e estilizar todas as suas páginas para que pareçam assim. Então, quando você quiser alterar o layout do seu site, basta alterar um arquivo CSS, e o site inteiro será alterado - não mais passando por cada página, uma de cada vez, para atualizar as tabelas para atualizar o layout.
Tabelas são inflexíveis
Embora seja possível criar layouts de tabela com larguras percentuais, eles costumam ser mais lentos para serem carregados e podem alterar drasticamente a aparência do layout. Mas se você usar larguras especificadas para suas tabelas, você terá um layout muito rígido que não ficará bem em monitores com tamanhos diferentes dos seus.
Criar layouts flexíveis com boa aparência em muitos monitores, navegadores e resoluções é relativamente fácil. Na verdade, com as consultas de mídia CSS, você pode criar designs separados para telas de tamanhos diferentes.
Tabelas aninhadas são carregadas mais lentamente do que CSS para o mesmo design
A maneira mais comum de criar layouts sofisticados com tabelas é "aninhar" tabelas. Isso significa que uma (ou mais) tabela é colocada dentro de outra. Quanto mais tabelas estiverem aninhadas, mais tempo levará para o navegador da Web renderizar a página.
Na maioria dos casos, um layout de tabela usa mais caracteres para criar do que um design CSS. E menos caracteres significa menos para baixar.
Tabelas podem prejudicar a otimização de mecanismos de busca
O layout criado da tabela mais comum tem uma barra de navegação no lado esquerdo da página e o conteúdo principal à direita. Ao usar tabelas, isso (geralmente) exige 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. Assim, uma página com navegação à esquerda primeiro aparecerá com conteúdo menos importante 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 que o design o coloque mais abaixo na página.
Tabelas nem sempre imprimem bem
Muitos designs de tabela não imprimem bem porque são simplesmente muito largos para a impressora. Assim, para ajustá-los, os navegadores cortarão as tabelas e imprimirão as seções abaixo, resultando em páginas muito desarticuladas. Às vezes você acaba com páginas que parecem bem, 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.
Tabelas para layout são inválidas em HTML 4.01
A especificação do HTML 4 afirma: "Tabelas não devem ser usadas apenas como um meio para layout do conteúdo do documento, pois isso pode apresentar problemas ao renderizar em mídia não visual."
Então, se você quer escrever HTML 4.01 válido, você não pode usar tabelas para layout. Você deve usar tabelas somente 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 alterou as regras e agora as tabelas para layout, embora não sejam recomendadas, agora são consideradas HTML válidas. A especificação do HTML5 afirma: "Tabelas não devem ser usadas como auxílios de layout." Isso ocorre porque as tabelas para layout são difíceis de diferenciar pelos leitores de tela, conforme mencionado anteriormente.
Usar CSS para posicionar e organizar suas páginas é a única maneira válida de HTML 4.01 de obter os designs que você usou para usar as tabelas, e o HTML5 também recomenda esse método.
Tabelas para o layout podem afetar suas perspectivas de emprego
À medida que mais e mais novos designers aprendem HTML e CSS, suas habilidades em criar layouts de mesa serão cada vez menos exigidas. Sim, é verdade que os clientes normalmente não informam a tecnologia exata que você deve usar para criar as páginas da Web, mas solicitam informações como:
- Páginas da web acessíveis: projetos que podem ser visualizados por leitores de tela estão sendo obrigatórios por muitos países e corporações acham a acessibilidade cada vez mais importante a cada dia.
- Páginas da Web atualizáveis: projetos que eles podem levar consigo mesmo se você não for mantê-los no futuro.
- Projetos flexíveis: designs que funcionam em vários navegadores, resoluções e dispositivos.
- Páginas de download rápido: a velocidade está se tornando cada vez mais importante, até mesmo para SEO.
- Projetos imprimíveis: páginas que são impressas sem scripts especiais ou páginas extras.
Se você não pode entregar o que os clientes pedem, eles vão parar de vir até você para projetos - período. Você pode realmente permitir que seus negócios sofram porque você não está disposto a aprender e incorporar uma técnica que está em uso desde o final dos anos 90?
The Moral: Aprenda a usar CSS
CSS pode ser difícil de aprender, mas qualquer coisa que vale a pena vale a pena o esforço. Não mantenha suas habilidades de estagnar. Aprenda CSS e construa suas páginas da maneira que elas deveriam ser construídas - com CSS para layout.
