Porque utilizar tabelas para layout é estupidez:

problemas definidos, soluções oferecidas

Tabelas existem no HTML por um motivo: Exibir dados tabulados. Mas a utilização de border="0" tornou possível para designers terem uma grade para exibir imagens e textos. Esta é, ainda, a forma predominante em que os designers projetam seus sites com um visual rico, porém, hoje o uso de tabelas está, de fato, interferindo na construção de sites melhores, mais acessíveis, flexíveis e funcionais. Descubra a origem destes problemas, e encontre soluções para criar sites transitivos, ou completamente sem tabelas (tableless).

Convença seu chefe

Há algum chefe de vocês aqui na Seybold, assistindo outras palestras nesse exato momento? Vá chamá-los!. Eles são as pessoas que precisam saber como os padrões Web podem salvar o dinheiro de suas empresas.

Visão Geral: O que há de bom para mim?

Vamos lhe dar alguns motivos para trabalhar com os padrões Web:

Nos próximos capítulos demonstraremos que formatar seu site utilizando CSS requer uma forma de pensar um pouco diferente que a qual você provavelmente está acostumado.

Assassinos de sites: tabelas aninhadas e GIFs de espaçamento

No princípio, a internet era principalmente um meio em que os acadêmicos, investigadores e o exército compartilhavam informações. Entretanto, não demorou muito para que os visionários empresariais percebecem que este era um excelente meio para se vender qualquer coisa, de produtos frescos e cachorros quentes até carros usados e equipamentos esportivos.

porém, como qualquer mídia "jovem", a internet estava esteticamente cru (e por isso não atraía os consumidores), até david siegel publicar seu livro, um marco, que ofereceu algumas formas de trabalhar as limitações dos browsers existentes e as especificações do w3c, aproximadamente 1997. (estamos falando de netscape 2 e 3, pessoal.)

na realidade, estas formas de trabalho eram tão brilhantes, que prevalecem até hoje como o método mais utilizado para se leiautar páginas para a web.

O problema com o uso de tabelas:

A salvação está à mão

Browsers modernos são muito melhores para renderizar os padrões web, por isso não precisamos mais utilizar estes métodos arcaicos.

No lugar de aninhar tabelas dentro de tabelas, e encher celulas vazias com gifs transparentes, nós podemos usar simples marcações HTML30/12/2004 e CSS para formatar belos sites, que são rápidos para carregar, fáceis de redesenhar, e muito mais acessíveis para todos.

A solução: CSS e marcação estruturada

Usando marcação estruturada e Cascading Style Sheets em nossas páginas, podemos manter o conteúdo separado da formatação.

Com isto temos várias vantagens sobre o uso de tabelas...

Redesigns são mais fáceis e mais baratos

Removendo os dados de formatação de nossas páginas, refazê-las se torna um trabalho muito menos intenso (e mais barato). Para mudar o layout do site, tudo o que você precisa fazer é alterar a folha de estilo (CSS); você não precisa editar todas as páginas do site novamente.

Se quer exemplos, veja o CSS Zen Garden, ou a troca de estilos do site de Eric Meyer. Para aprender mais, veja Alternative Style por Paul Sowden.

Banda de transferência não é de graça

Utilizar padrões Web reduz o tamanho das suas páginas, pois os usuários não precisarão baixar os dados de formatação a cada página visitada. O CSS que controla o layout fica no cache de seus browsers.

Arquivos menores implicam carregamento mais rápido e menos custo de hospedagem.

Ei, todas estas páginas estão parecidas!

Utilizando os padrões Web torna-se extremamente fácil manter a consistência visual de um site. Todas as páginas usam o mesmo arquivo CSS que configura cores, tamanhos e posições para os textos e demais objetos, deixando-as formatadas da mesma maneira.

Isto fortalece sua marca e deixa o seu site muito mais usável.

Escreva uma vez, use em qualquer lugar, para qualquer pessoa

Os padrões Web tornam nossas páginas muito mais acessíveis para usuários com deficiências e para browsers de celulares e PDAs que acessam a Web.

Visitantes que utilizam leitores de tela (e visitantes com conexões lentas) não têm que navegar por incontáveis células de tabelas e espaços para chegar ao conteúdo real de nossas páginas.

Em outras palavras, separar o conteúdo da formatação deixa o seu site acessível independente do dispositivo utilizado.

O Google é cego

Falando de acessibilidade: minimizar a código e usar corretamente as tags de cabeçalho (h1, h2 etc) são métodos que ajudam a melhorar o seu ranking em ferramentas de busca.

Reduzir a proporção do código em relação ao conteúdo, usar palavras-chave em suas tags de cabeçalho, e substituir GIFs por texto normal é uma grande ajuda para que o seu site apareça melhor nos resultados das pesquisas.

Você ainda pode utilizar tabelas se precisar, apenas não utilize tantas

Isto dará aos usuários (e chefes), insistentes e determinados em utilizar a versão 4 dos browsers até a morte, uma aproximação aceitável do que o resto do mundo está vendo.

Uma tabela bastante agradável de se ver

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eros et accumsan et iusto odio dignissim qui blandit
Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Epsum factorial non deposit quid pro quo hic escorol.
Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Dê só um uma olhada embaixo da superfície

Isto poderia ser feito de forma muito mais simples. Adivinhe quanto HTML existe nesta pequena tabela? 13.7KB. Há 17 linhas e 9 colunas nesta coisa. E eu mencionei os GIFs de espaçamento?!?
Há muitas células e GIFs aqui. E todas estas bordas pontilhadas são feitas com um atributo background das TDs, que não validará.
Uma tabela aninhada? Para quê?
Para criar uma lista com marcadores? Você está brincando, né?
Isto tudo pode ser feito com 8 células e 4 classes na CSS. Sério. 8 células e 4 classes, é tudo que precisa.
Ah não, outra tabela disfarçada de lista de marcadores.
Apenas escreva sua lista de marcadores COMO uma lista deve ser e deixe a CSS fazer o resto.
Você precisa de uma classe para a tag <table>, uma para a <td>, uma para a <ul> e uma para a <li>. É isso aí. Quando tiver isso, você tá feito.
Isso é melhor que usar mais 8 células para fazer uma falsa lista, que terminará sendo muito menos acessível.
Excelente! O último falso marcador.

O código que mostra a estrutura da tabela:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

Isto é muito melhor

muito melhor Advinhe quanto de código há nessa minúscula tabela? 2.1k. Há 4 linhas e 2 colunas nessa coisa. E nenhum GIF de espaçamento.
correto E todas estas bordas pontilhadas são determinadas pelo CSS e são perfeitamente válidas.
  • Isto é um item de lista agora
  • Como deve ser
Tudo isto foi feito com uma tabela de 8 celulas e 4 classes no CSS. Sério. 8 celulas e 4 classes, é tudo que precisa.
  • Um viva para as listas de marcadores
  • Por que não fazer sua lista de marcadores como uma lista deve ser e deixar a CSS fazer o resto?
>Você precisa de uma classe para a tag <table>, uma para a <td>, uma para a <ul> e uma para a <li>. É isso aí. Quando tiver isso, você tá feito.
  • Eu simplesmente amo listas de marcadores.
  • Excelente! O último falso marcador.

E aqui está o código CSS usado para nos livrar daquele código inútil:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Recapitulando os designs transitivos

Use margin e padding no lugar de células extras e GIFs de espaçamento.

Use link e @import para os estilos. O primeiro para browsers antigos e o segundo para os modernos.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Exemplos reais:

Mas espere, há mais:

Para mais informação sobre designs de transição, veja o capítulo 1 do Eric Meyer on CSS e também parte do Designing with Web Standards por Jeffrey Zeldman.

Layouts com CSS: o futuro está aqui

A grande maioria dos usuários de internet de hoje utilizam browsers que têm bom suporte às CSS. Eles têm suas picuinhas, mas depois que você se acostumar, poderá se virar bem.

Codificar em CSS é fácil. Até mesmo para um garoto como eu que acha que javascript se parece com praguejar.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Toda regra em CSS tem um seletor e uma declaração. A declaração é composta de uma propriedade e um valor. As propriedades geralmente são duas palavras separadas por um hífen.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Marcação estrutural: o que você diz com o seu código e o que ele diz

Enquanto que escrever CSS é simples, utilizá-la para formatar seus sites requer uma forma de pensar um pouco diferente da que já vinhamos utilizando.

No lugar de pensar coisas como "isto vai aqui, e isto vai ali" quando estamos trabalhando o layout de uma página, nós precisamos pensar sobre o tipo de informação dentro da nossa página e a estrutura desta informação.

Nós daremos para a manchete a tag <h1>; sub-títulos serão marcados com a tag <h2> etc; e parágrafos serão parágrafos.

Isto é conhecido como marcação "estruturada", ou marcação "semântica".

Ao invés de colocar o seu conteúdo dentro de tabelas, envolva o seu conteúdo dentro de elementos div. Dê a seu elemento div um id (identificador) ou uma class que descreverá o seu conteúdo e/ou função, no lugar de sua aparência.

Evite <b>ed e <br>eakfast markup1

Quando você quer que algo apareça de certa forma, o que quer dizer com isso? Sua marcação pode e deve carregar significado, até para alguém que não verá a sua página. Marcação semântica traz mais acessibilidade para todos, incluindo ferramentas de busca.

Quando você quer escrever algo em itálico, é por que você quer enfatizar (emphasize) isto, <em>, ou por que é o título de um livro, <cite>?

Se alguma coisa está em negrito deve ser marcado com um <strong>.

Se você quer uma quebra de linha após alguma coisa, provavelmente ela se trata de título. Caso contrário, é bem provável que ele faça parte de uma classe que ocorre ao longo do site. Se for este o caso, então utilize CSS no lugar de <br>:

.foo {display:block}

Para aprender mais, veja Bed and BReakfast markup (B&BR) por Tantek Çelik.

1 Mnemônico cunhado por Tantek Çelik, para ilustrar as tags que devem ser evitadas no uso cotidiano. (N.T.)

Coisas que tabelas fazem melhor do que CSS

Há certas coisas que CSS não faz tão bem como as tabelas.

Por exemplo, digamos que você tem uma navbar lateral preta, que você quer que se extenda verticalmente acompanhando o conteúdo. Com um layout feito em tabelas, é mais simples que roubar doce de criança: apenas use um fundo preto dentro da tag <td>.

Nós podemos fazer isto utilizando CSS, mas isto requer uma forma diferente de pensar.

Se dermos à nossa nav div um fundo preto, este fundo irá se extender somente até o fim do menu. Em muitas páginas, o conteúdo é mais longo que a barra de navegação, entao isto não vai ficar muito bonito.

Nós poderiamos também ladrilhar um fundo preto na nossa div de conteúdo, e dar a esta div bastante padding à esquerda, mas se nossa navegação for maior que o conteúdo, isto não vai funcionar a contento.

Outro caminho para se fazer isto seria utilizar um GIF preto como plano de fundo de nosso <body>, o que funciona bem, a menos que você queira utilizar outra imagem para o background de seu <body>.

Ou, nós podemos envolver nosso conteúdo em uma div e ladrilhar a imagem nesta div. Entretanto, estaríamos acrescentando marcação não semântica desnecessária ao nosso código.

E, claro, utilizar imagens de fundo não funcionnrá se você quiser que a barra de navegação seja fluida (ajustada na largura conforme o texto e resolução do usuário).

Como nós dissemos, existem coisas que tabelas fazem melhor que CSS. Mas no fim você precisa se questionar se toda esta bagagem que vem o uso de tabelas vale realmente a pena.

Migrando de tabelas para Padrões Web: O grande momento

Primeiramente, você precisa decidir uma estratégia de migração. Você vai migrar o site inteiro de uma vez, ou você vai fazer a migração seção por seção?

Identifique as seções e páginas em que a conversão trará mais benefícios. Home pages, páginas de novidades em produtos e similares são um lugar natural para se começar.

Identifique o tipo de conteúdo/informação de seu site como um todo

  • Informações de produtos
  • Informações de preços
  • Informações da empresa
  • Portfólio
  • Serviços oferecidos
  • Informações de investidores
  • Carrinho de compras
  • Fóruns de usuários
  • E assim por diante

Quebrando suas páginas em pedacinhos

Com o esquema dos tipos de conteúdo do site em mãos, está na hora de analizar as páginas existentes para uma divisão lógica do conteúdo.

  • Navegação Principal
  • Subnavegação
  • Cabeçalhos e rodapés
  • Conteúdo
  • Informações relacionadas
  • Outros

Analize sua estrutura em busca de tabelas aninhadas e espaços vazios e bordas de células. (Nós queremos substituir tudo isto com tags div ou com uma estrutura de tabelas mais simples.)

Olhe para o seu código

Depois de analizar a estrutura de sua página, vamos dar uma olhada no seu html existente e analizar o que pode ser substituído por marcação estruturada.

  • Pelo amor de tudo que é puro e bom, livre-se das tags <font> e GIFs transparentes!
  • Da mersma forma, dispense as marcações <b> e <br> .
  • Retire as marcações de exibição de dados (bgcolor, background, e similares).
  • Substituia a CSS puramente descritiva (como isto: <span class="header">) por marcação estrutural apropiada. (Tantek Çelik traz mais detalhes no seu post, A Touch of Class.)

Substitua as tags meramente descritivas com marcação estrutural

Você pode utilizar os recursos de localizar e substituir (e expressões regulares), mas a forma mais fácil de se fazer isto é abrir sua página existente em um browser, e copiar o seu texto colando-o dentro de um editor de HTML.

Lembre-se sobre a estrutura do documento! Substituir puramente as tags <b> por <strong> não é suficiente.

Qual o título mais importante? Marque-o com uma tag <h1>. Marque seus subtítulos com <h2>e assim por diante. Marque os parágrafos com <p>. Marque sua navegação como listas desordenadas.

Escolha um DOCTYPE e o utilize. (Nós recomendamos XHTML transitional, a menos que você seja bem experiente, neste caso, utilize XHTML strict.)

Divida sua página em divs lógicos

Coloque seu menu principal dentro de um div com um id mainnav (ou menuPrincipal); coloque seu submenu dentro de um div com um id ou class subnav, coloque seu rodapé (footer) com um id <div id="footer">, e envolva o conteúdo (content) dentro um div como este <div id="content">.

Parece estranho agora, mas depois que você começar a adicionar regras (classes e id's) para seu CSS, as coisas irão melhorar rapidamente.

Está na hora de escrever sua CSS

Para começar, dê para cada tag div uma borda. Por exemplo, div {border: 1px dotted gray; padding: .5em} Isto irá te ajudar a ver onde a div começa e termina, e também se tem ou não uma div dentro de outra.

Escreva seu CSS para elementos de seleção (selectors) primeiro (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Use seletores contextuais ou descendentes sempre que possível. Assim você manterá sua marcação mais limpa. Por exemplo, #subnav li {border: 1px solid black; padding: .5em; display: inline} irá afetar somente a lista de itens que está dentro da subnav div.

Teste no máximo de browsers que você puder, e peça aos seus amigos que testem em seus browsers.

Leia tudo sobre isto

Obviamente, nós não poderíamos cobrir tudo que você precisa saber sobre CSS em uma hora, mas estes livros poderão ajudar você no uso de Padrões Web (Web standards) a fazer suas páginas mais leves, limpas e rápidas.

Papel? Nós não precisamos de nenhum papel fedorento: Recursos Online

Discussões sobre CSS:

  • arqHP: Excelente lista de discussão brasileira (N.T.).
  • mailing list: Muito ativa, muita ajuda.
  • Wiki: "Entre outras coisas, o wiki serve como uma memóra a longo prazo de tudo que acontece na lista". Quer dar ao Internet Explorer (Windows) algo que ele entenda, mas dar aos melhores browsers "a coisa certa"? Você saberá como fazê-lo e muito mais.
  • Archives: Está com um problema na CSS que está te deixando louco? Não se preocupe, alguém já passou por isto (e recebeu ajuda) sobre o mesmo problema. Encontre a resposta aqui.

zeldman.com The Daily Report: Criterioso, questionador, conteúdo bem-escrito e links servidos regularmente

A List Apart Por pessoas que fazem Web Sites

The Web Standards project Abençoe estas pessoas.

CSS: A guide for the unglued Uma grande página.

CSS Layout Techniques: for Fun and Profit Layouts que você pode utilizar nos seus projetos por Eric Costello. Recursos e tutoriais também.

Real World Style CSS layouts, dicas, truques, e técnicas de Mark Newhouse.

DevEdge Netscape Sidebar Tabs Links incríveis para especificações do W3C para CSS, HTML, e o DOM.

New York Public Library Style Guide Um recurso à mão para obter o básico de XHTML e CSS.

The Business Benefits of Web Standards Boas notícias para homens de negócios. O evangelho do padrão web presente em termos que um MBA pode apreciar.

Obrigado. Alguma pergunta?

Todo mundo ama tabelas estúpidas

(Bem, talvez não as próprias tabelas, mas o pessoal parece gostar muito desta apresentação.)

Graças as esforços das pessoas listadas abaixo, “Why Tables for Layout is Stupid” já foi traduziada para todas estas línguas.

If you'd like to translate it into your native tongue, . (Qual é, Japão, onde está você? E vocês, Coréia e Rússia? Não me digam que ninguém na Índia ou no Oriente Médio entende o valor dos Padrões Web. Eu não irei acreditar nisso).

Nota as os usuários do Internet Explorer:

Para ver corretamente sites usando alfabetos não-romanos (como as traduções búlgara e chinesa deste site), você precisará mudar as preferências de Idioma/Fontes para que conjunto de caracteres padrão seja o "Alfabeto Universal (UTF-8)". Isto não irá afetar qualquer um dos sites que você normalmente visita e lhe dará acesso a um completo novo mundo de sites em línguas que você provavelmente não conseguirá ler mesmo assim.

; Scott Design, Inc.

; Adobe Systems Incorporated

Sérgio Lima Jardim ; Plasma Design (tradução)

Danival A. Souza ; Codigonet (tradução)

Versões Internacionais

Se esta não é sua língua pátria, visite a página de traduções e veja as opções disponíveis.

Creative Commons LicenseLicensiado sob uma Licença Creative Commons.