Tabelas em vez de DIVs [duplicado]

https://stackoverflow.com/questions/30251

html
css

09-06-2019
|

Pergunta

Possíveis Duplicados:
Por que não usar tabelas para layout em HTML?

Em que condições você deve escolher tabelas em vez de DIVs em codificação HTML?

Solução

Todo o "Tabelas vs Divs" a coisa acaba mal erra o alvo.Não é mais a "tabela" ou "div".É sobre o uso de semântica do html.

Até mesmo a tag div desempenha apenas uma pequena parte de um bem colocado para fora da página.Não abuse dele.Você não precisa que muitas, se você colocar o seu html juntos corretamente.Coisas como listas, conjuntos de campo, legendas, rótulos, parágrafos, etc pode substituir muito do que uma div ou span é muitas vezes utilizado para realizar.Div deve ser usada, principalmente, quando faz sentido para indicar uma lógica divisão, e somente apropriado para extra de layout quando absolutamente necessário.O mesmo é verdadeiro para a tabela;use-a quando você tiver dados em forma de tabela, mas não o contrário.

Em seguida, você tem mais página semântica e você não precisa de muito, como muitas classes definidas no seu CSS;você pode segmentar as etiquetas diretamente em vez disso.Possivelmente o mais importante, você tem uma página que vai marcar muito melhor com o Google (ironicamente) que o equivalente a mesa ou div pesada página.Mais do que tudo isso vai ajudar você a se conectar melhor com uma parte de seu público-alvo.

Então, se voltar e olhar para ele em termos de tabela vs div, é minha opinião que nós, na verdade, vir para o ponto onde div é mais utilizado e a tabela é sub-utilizado.Por quê?Porque quando você realmente pensa sobre isso, há um monte de coisas lá fora, que se enquadram na categoria de "dados tabulares", que tendem a ser esquecidos.Respostas e comentários sobre esta página web, por exemplo.Eles consistem de vários registros, cada um com o mesmo conjunto de campos.Eles ainda estão armazenados em uma tabela do sql server, para sair chorando.Esta é a definição exata de dados tabulares.Isso significa uma tabela html tag seria absolutamente ser uma boa semântica escolha do layout algo parecido com os posts aqui no Estouro de Pilha.O mesmo princípio se aplica a muitas outras coisas.Ele pode não ser uma boa idéia para usar uma tag de tabela para definir até três layout de coluna, mas certamente é bem usá-lo para redes e listas...exceto, claro, quando você pode realmente usar o ol ou ul (lista) tags.

Outras dicas

Quando os dados que eu estou apresentando é, de fato, em forma de tabela.

Acho que é ridículo que alguns web designers usado divs em dados tabulares em alguns sites.

Um outro uso que eu teria seria formulários, particularmente rótulo :texto pares.Isso pode tecnicamente ser feito em div caixas, mas é muito, muito mais fácil para fazer isso em tabelas, e pode-se argumentar que o rótulo:caixa de texto pares são, na verdade, em forma de tabela na natureza.

Eu costumava fazer, CSS, mas eu abandonei, que busca a favor do híbrido tabela/css abordagem mais pragmática abordagem.Ironicamente, é também porque de acessibilidade.Nunca tente fazer o CSS no Sidekick?O que é um pesadelo!Já viu como CSS baseado em web sites são renderizados em novos navegadores?Os elementos se sobrepõem ou se simplesmente não exibir corretamente que eu tinha que desativar o CSS.Nunca tente redimensionar a janela do CSS baseado em web sites?Eles parecem horríveis, e muitas vezes prejudicial para os cegos se utilizam recursos de zoom no navegador!Se você fizer isso com tabelas, eles escala muito melhor.Quando as pessoas falam sobre acessibilidade, acho que muitos têm nenhuma pista, e isso me irrita, porque eu sou deficiente, e eles não são.Eles realmente trabalharam com o cego?O surdo?Se a acessibilidade é uma preocupação principal, por que o inferno são 99% dos vídeos não legendado?Muitos CSS puristas usar AJAX, mas não conseguem perceber que o AJAX, muitas vezes, torna o conteúdo inacessível.

De forma pragmática, é ok para usar uma única tabela, como o layout, contanto que você forneça as informações em um fluxo lógico se as células são empilhados (algo que você gostaria de ver em celulares).O CSS teoria parece ótimo, mas parcialmente funcional na vida real com muitos hacks, algo que é contra os ideais de "pureza".

Desde utilizando o CSS com tabelas de abordagem, eu tenho guardado a tanto tempo projetando um site e a manutenção é muito mais fácil.Menos hacks, mais intuitiva.Eu recebo menos ligações de pessoas dizendo "eu inseri um DIV e agora ele olha a todos asneira!" E ainda mais importante, absolutamente NENHUM questões de acessibilidade.

Geralmente quando você não está utilizando a tabela para fornecer um layout.

Tabelas -> dados

Galeria -> layout

(principalmente)

Nota:No momento em que a pergunta foi feita, não foram razões de ordem prática para o uso de tabelas para alguns fins de layout.Isso não é mais necessário, devido ao navegador de melhorias, de modo que eu atualizei a resposta.

HTML <table>-elementos devem ser utilizados quando os dados logicamente tem uma estrutura tridimensional.Se os dados podem ser estruturados em linhas e colunas e você pode significativamente aplicar cabeçalhos para linhas e colunas e, em seguida, você provavelmente terá de dados tabulares.

Eu só tenho uma única linha ou coluna única de dados, então não é tabular de dados - trata-se apenas de conteúdo linear.Você precisa de pelo menos duas linhas e duas colunas antes que possa ser considerada de dados tabulares.

Alguns exemplos:

O uso de tabelas para a colocação de barras laterais de página e cabeçalhos/rodapés.Este não é tabular de dados, mas o layout da página.Algo como o css grid ou o flexbox é a mais adequada.

O uso de tabelas para colunas em estilo de jornal.Este não é tabular de dados - você ainda lê-lo de forma linear.Algo como o css colunas é a mais adequada.

Eu gostaria de fazer uma distinção entre o HTML para sites públicos (tabelas não-não-não, divs sim-sim-sim) e HTML para o semi-públicas ou privadas de aplicações web, onde eu tendem a preferir tabelas, mesmo para o layout de página.

A maioria dos respeitáveis razões por que "Tabelas são ruins" são geralmente um problema apenas para os sítios web públicos, mas isso não é muito de um problema com webapps.Se eu posso obter o mesmo layout e tem mais aparência consistente entre os navegadores por meio de uma TABELA de um complicado CSS+DIV, então, eu costumo ir em frente e comprovar a TABELA.

Como muitos cartazes já mencionado, você deve usar tabelas para apresentar para dados tabulares.

Tabelas foram introduzidas no HTML 3.2 aqui é o parágrafo relevante a partir da especificação de seu uso:

[tabelas] pode ser utilizado para marcação em forma de tabela ou de material para fins de layout...

Concordo com o Thomas -- a regra geral é se faz sentido em um spreedsheet, você pode usar uma tabela.Caso contrário, não.

Basta não usar tabelas como seu layout para a página, que é o principal problema que as pessoas têm com eles.

Eu posso ver o argumento para tabelas, formulários, mas não é a melhor alternativa...você apenas tem que arregaçar as mangas e aprender CSS.

por exemplo:

<fieldset>
  <legend>New Blog Post</legend>

  <label for="title">Title:</label>
  <input type="text" name="title" />

  <label for="body">Body:</label>
  <textarea name="body" rows="6" cols="40">
  </textarea>
</fieldset>

Você pode assumir que o html e o layout do formulário lado-a-lado rótulos ou etiquetas na parte superior das caixas de texto (o que é mais fácil).Ter a flexibilidade realmente ajuda.É também a menos de HTML do que a tabela de equivalentes de qualquer um.

Para alguns excelentes exemplos de CSS, formulários, confira essas excelentes exemplos:

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

Eu geralmente optam por tabelas para exibir formulário-tipo de informações (Nome, sobrenome, Endereço, etc.) onde forro de rótulos e campos entre várias linhas é importante.DIVs eu uso para fazer o layout.

É claro que a tabela é envolto em uma DIV :)

Tabelas foram projetados para a tabela de conteúdo, não para o layout.

Então, não se sinta mal se você usá-los para exibir dados.

Eu uso de tabelas em dois casos:

1) dados Tabulares

2) toda vez que eu quero meu layout dinamicamente o tamanho próprio para o seu conteúdo

Se os dados podem ser dispostos em uma grade bidimensional, use <table>.Se ele não pode, não.Usando <table> outra coisa é um hack (embora freqüentemente não de um, com a devida alternativas, especialmente quando se trata de compatibilidade com navegadores mais antigos). Não usando <table> para algo que claramente deve ser, é igualmente ruim. <div> e <span> não para tudo;de fato, sendo totalmente sem sentido no nível semântico, eles devem ser evitados a todo o custo, em favor do mais semântica alternativas.

Sobre este assunto, eu pensei este o site foi muito engraçado.

1) Para exibir dados tabulares.Um calendário é um exemplo de tabela de dados que nem sempre é óbvia, à primeira.

2) eu trabalho para um médico do faturamento da empresa, e quase tudo o layout para o nosso trabalho interno é feito usando CSS.No entanto, de tempos a tempos, podemos obter os formulários de papel de companhias de seguros que o nosso billers tem que usar, e uma programa irá convertê-los para um formato html, que podem preencher e imprimir através da intranet.Para se certificar de que as formas são aceitas eles precisam combinar com o original versão em papel, muito de perto.Para estes é apenas simples cair de volta para as tabelas.

As tabelas são utilizadas para dados tabulares.Se faz sentido colocá-lo em uma planilha, em seguida, usar uma tabela.Caso contrário, há um melhor marca para que você esteja usando como div, span, ul, etc.

Eu acredito que apenas a tabela de conteúdo.Por exemplo, se você imprimir uma tabela de base de dados ou folha de cálculo-como dados para HTML.

Se você gostaria de ter semanticamente correto HTML e, em seguida, você deve usar tabelas apenas para dados tabulares.

Caso contrário, você deve usar tabelas para tudo o que você quer, mas provavelmente há uma maneira de fazer a mesma coisa usando divs e CSS.

@Marius:

É o layout tabular de dados?Não, enquanto era normal há alguns anos atrás, não agora :-)

Um outro uso que eu teria seria formulários, particularmente rótulo :texto pares.Isso pode tecnicamente ser feito em div caixas, mas é muito, muito mais fácil para fazer isso em tabelas, e pode-se argumentar que o rótulo:caixa de texto pares são, na verdade, em forma de tabela na natureza.

Eu tendem a dar-lhe o rótulo de uma largura fixa, ou exibi-lo na linha de cima.

@Jon Limjap

Para o rótulo :a caixa de texto, nem divs nem tabelas são apropriados: <dl>s são

Um outro uso que eu teria para ele seriam formas, nomeadamente rótulo :texto pares.Isso poderia tecnicamente ser feito em div caixas, mas é muito, muito mais fácil para fazer isso em tabelas, e pode-se argumentar que o rótulo:caixa de texto pares são, na verdade, em forma de tabela na natureza.

Eu vejo que uma quantidade razoável, especialmente entre MS desenvolvedores.E eu fiz uma quantidade razoável no passado.Ele funciona, mas ele ignora alguns acessibilidade e melhores práticas de fatores.Você deve usar rótulos, insumos, conjuntos de campos, lendas e CSS para o layout de suas formas.Por quê?Porque é isso que eles são, é mais eficiente, e eu acho que a acessibilidade é importante.Mas isso é apenas a minha preferência pessoal.Eu acho que todo mundo deveria provar que o caminho primeiro, antes de condená-lo.É rápido, fácil e limpo.

Quando alguma vez uma página contendo tabelas é carregado por qualquer navegador que leva mais tempo para o navegador para compor a marca.Onde, como se o div é usado ,o navegador demora menos tempo porque é mais leve.E mais, podemos aplicar o css para fazer a hora de ir aparecer como tabela,

As mesas são normalmente pesados wieght e div são de peso leve.

É claro que a DIV são usadas para Layout, mas aconteceu-me a ser "forçado" a utilizar planilhas para fazer um layout de grade dentro de uma div estrutura para este razões:

a adição de valores de porcentagem não permitir um correcto alinhamento com a div, enquanto os mesmos valores expressos em células de tabelas deu o resultado esperado.

Então eu acho que as tabelas são úteis não apenas dados, mas também para a situação acima, no topo do que, as tabelas são ainda compatível com W3C navegador e alternativas de navegadores (para os deficientes, por exemplo) interpretar deles corretamente.

Divs são simples divisions, eles estão a dizer não para ser usado para agrupar seções de página que são, em um sentido semântico ligado.Eles não tem nenhum significado implícito diferente.

Tabelas foram originalmente destinados a visualização científica de dados, tais como de laboratório, os resultados na tela.Dave Raggett, certamente, não pretende-los para se tornar usado para implementar o layout.

Eu acho que ele mantém com isso bastante claro em sua mente se você se lembra o acima, se é algo que você normalmente esperaria de leitura em uma tabela, então o que é a tag apropriada, se a sua pura layout e, em seguida, usar outra coisa para fazer suas necessidades.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow