Por que tantas tabelas HTML são usadas na marcação de página?

8

Estou tentando entrar no desenvolvimento web, então comecei a aprender HTML, CSS e javascript. Estou me saindo muito bem com javascript, mas ainda não consigo criar nada com HTML e CSS para salvar minha vida. Eu pediria alguns lugares ou dicas para melhorar, mas sei que a pergunta já foi feita inúmeras vezes e seria excluída, então imaginei que apenas veria a fonte dos sites de outras pessoas.

O que continuo vendo são as mesas esquerda e direita. Existe um motivo válido para usar tabelas?

html mowwwalker
fonte
giveupandusetables.com
MSalters
Uma boa razão pode ser que você esteja em uma equipe realmente péssima, mas todo mundo tem mais poder político do que você e todos são realmente paranóicos de novas idéias que explicariam por que eles favorecem o esquema de layout preferido de 1998.
Erik Reppen

Respostas:

16

Dispor dados tabulares.

Aqui estão algumas perguntas a serem feitas ao escolher entre tabelas e recipientes css.

As tabelas são para dados tabulares. Período.

A <table>etiqueta não é má. Apesar do que algumas pessoas pensam e dizem, o objetivo do CSS é nunca usá-lo. No entanto, um corolário do princípio do HTML Semântico é que você nunca deve usar tabelas para o layout . Deixe-me dizer isso novamente, como seu próprio parágrafo, para enfatizar:

Nunca use tabelas para o layout. Sempre.

Se você não conseguir decidir se uma mesa é ou não a escolha certa, faça estas perguntas a si mesmo:

  • "As linhas ou colunas de informações compartilham um atributo comum?"
  • "Se eu alterasse a ordem das linhas ou colunas, ainda faria sentido?"
  • "Se eu transpusesse os eixos da tabela (fiz linhas em colunas e vice-versa), ainda faria sentido?"

Se a resposta para o acima é geralmente "Hum ... acho que não", então você não deveria estar usando uma tabela.

Se você precisar de mais convencimento, consulte "Por que as tabelas são ruins (para layout) em comparação com HTML + CSS semântico" .

Demian Brecht
fonte
2
@WeekendWarrior: Não tenho certeza se eu concordo. Por que diabos eu gostaria de invadir uma solução CSS para exibir uma ncoluna tabular por ngrade de linhas, como, por exemplo, estatísticas em um jogo da NFL? É exatamente onde as tabelas devem ser usadas. Talvez o layout da grade CSS o substitua em algum momento (uma vez que ele é compatível com vários navegadores, pelo menos para algumas versões de cada), mas ainda não está lá.
Demian Brecht
@ Demian Ele disse "tabelas para o layout". Tenho certeza que ele não quis incluir dados tabulares.
Rein Henrichs
Uma tabela seria apropriada para, por exemplo, um libreto de ópera de tradução lado a lado [usando uma linha da tabela por linha]? Tal coisa não seria exatamente "dados tabulares", mas o uso de uma tabela manteria a associação entre as linhas no idioma original e a tradução, mesmo que o texto fosse ampliado o suficiente para fazer com que algumas linhas fossem quebradas.
supercat 02/09
9

Supondo que você queira dizer tabelas usadas como layout de página, e não apenas para dados tabulares ...

Você está vendo tabelas porque o CSS é frustrante de usar (reconhecidamente menos agora do que há alguns anos atrás). Em algum momento, é preciso fazer o trabalho. Para fazê-lo "corretamente", usando CSS, é necessário muito esforço e experimentação. As mesas, por outro lado, podem ser apreendidas intuitivamente.

Se você deseja fazer o certo (usando CSS) e não quer desperdiçar sua vida com CSS, o melhor compromisso é se contentar com alguns layouts diferentes e colocar CSS fora dos sites de modelos. Use os modelos como ponto de partida. Começar do zero com CSS é uma receita para a frustração.

Angelo
fonte
4
+1 para "concluir o trabalho". Sou desenvolvedor, não designer de interface do usuário. Posso certamente criar uma interface do usuário funcional e um pouco atraente, mas levará muito mais tempo do que um designer de interface do usuário. O que eu daria para um cara da minha equipe que apenas projetou os modelos e estilos, para que eu não precisasse me preocupar com isso.
AJC
1
Não posso deixar de pensar que o CSS poderia ter sido muito mais simples. IMHO essa complexidade desnecessária e a falta de uma implementação de referência "pixel perfeito" levaram a implementações ruins / inconsistentes dos fornecedores de navegadores, levando toda uma geração de desenvolvedores da web a "não entender".
Angelo
1
Costumava haver "interpretações" do modelo de caixa em que as tabelas eram a única maneira. Por exemplo, o elemento FORM não pôde ser estilizado, mas ainda gerou uma caixa (com margem / preenchimento padrão) no IE. A única maneira de se livrar do espaço extra era apertar o FORM entre TABLE e TR. Totalmente contra o padrão, mas a única maneira que funcionou.
SF.
@ Angelo: A questão não era apenas que o CSS era "frustrante"; historicamente, foi incapaz de fazer muitas coisas que eram bastante fáceis com as tabelas. Algo simples como um layout de texto principal mais barra lateral, em que a barra lateral teria 10% da largura disponível, mas pelo menos 140 px de largura (a largura de um determinado logotipo), seria fácil com uma tabela [IIRC, set a largura da tabela para 100%, deixe a largura da coluna principal não especificada e defina a largura da coluna da barra lateral para 10%; a largura da coluna seria superior a 10%, se necessário, para acomodar um gráfico de 140 px]). Quando o CSS pôde fazer isso pela primeira vez?
supercat
8

Os layouts baseados em tabela são, de certa forma, mais fáceis de aprender do que os layouts CSS puros para pessoas que estão começando a aprender HTML. Além disso, antigamente, você não podia usar o CSS de maneira confiável e fazê-lo funcionar em todos os navegadores. Assim, praticamente todos os tutoriais em HTML, até 2000, usavam tabelas exclusivamente para layouts. Muito desse código HTML foi transferido para outros sites (via View Source) e muitas pessoas aprenderam com esses tutoriais e não se deram ao trabalho de aprender layouts de CSS.

Vou me oferecer para ser inflamado aqui e dizer que você ficará bem se começar a fazer seus layouts em tabelas antes de aprender CSS. As diferenças no nível iniciante são menores, na melhor das hipóteses. Você não será capaz de criar layouts realmente intrincados em SEMPRE até ter um ou dois anos de experiência, portanto, não há muita diferença. Comece com as tabelas para exibir algumas coisas na tela e manter seu interesse e, lentamente, continue lendo sobre CSS (que é claramente superior a longo prazo). Eu costumava ser um zelote do CSS no dia de "Designing with Web Standards", mas isso era apenas porque era divertido ser auto-rituoso e superior.

Graham
fonte
6
Eu discordo, embora não o chamasse. Aprender a fazer o layout com tabelas não é necessariamente mais fácil (não foi para mim). Mais importante, a transição do "caminho das tabelas" para o caminho do CSS é mais difícil do que apenas aprendê-lo da primeira vez.
precisa saber é o seguinte
1

Navegadores são o problema. Apesar das melhores práticas e do que todos concordaram, era muito difícil fazer com que os sites parecessem consistentemente bons em navegadores sem tabelas, mesmo que eles estivessem codificados incorretamente. Tem a ver com semântica. Essa é a coisa mais importante a aprender com HTML, são os significados semânticos das tags. O melhor lugar para aprender é nos primeiros cinco vídeos que o Educator.com possui nos vídeos em HTML, todos eles são feitos com o HTML5 em mente e explicam o que é semântica e por que é importante.

Phillip James
fonte
Eu esqueci de mencionar, os navegadores alcançaram. Ninguém mais usa o IE6, então agora as tabelas são mais complicadas do que valem a pena, é realmente mais fácil fazer as coisas da maneira certa agora. Portanto, esqueça as tabelas, a menos que esteja trabalhando com "dados tabulares". Veja o vídeo que mencionei se você não entende o que quero dizer com "dados tabulares".
Phillip James
Infelizmente no mundo corporativo e de cuidados de saúde não são surpreendentemente grande número de pessoas ainda usando IE6
CdMnky
A "coisa mais importante a aprender com HTML" é meio subjetiva. Estou no mundo do desenvolvimento de aplicativos da Web, portanto, a semântica HTML não tem sentido para a maior parte do tempo. Não é assim se eu estivesse criando sites que precisassem de recursos de SEO.
Graham