Deve Tabelas ser evitado em HTML a qualquer custo?

https://stackoverflow.com/questions/82391

01-07-2019
|

Pergunta

É aconselhável a utilização de tabelas em páginas HTML (agora que temos CSS)?

Quais são as aplicações de tabelas? Quais são as características / habilidades faz tabelas têm que não estão em CSS?

Questões relacionadas

Solução

Não - não em todos. Mas as mesas de uso para dados tabulares. Só não usá-los para layouting geral.

Mas se você exibir dados tabulares, como resultados ou talvez até mesmo um formulário, vá em frente e usar tabelas!

Outras dicas

Eu acho que não sou na maioria aqui, mas eu ainda vejo um monte de utilização para as tabelas em HTML. Claro, sim, para coisas como formulários, você simplesmente não pode vencer uma mesa. Tentando alinhar os rótulos e que acompanham os campos do formulário certamente seria possível usando DIV, mas o que é um PITA que seria, e redimensionar a página seria feio em alguns casos. Uma tabela faz maravilhas aqui.

Mas também considerar as questões maiores. Por exemplo, você já tentou criar um layout de 3 colunas padrão com cabeçalho e rodapé usando apenas do DIV e CSS? Novamente, é muito possível, e há cerca de 1000 sites com exemplos, mas todos eles tendem a sofrer dos mesmos problemas. O primeiro problema é que as colunas nunca realmente como para todos se tornam a mesma altura sem algum tipo de assistência javascript. O segundo problema está mudando o layout muitas vezes é uma coisa complicada, porque é um pouco de um ato balacing para obter tudo "justo direito" para começar, por isso, então você não quer mexer com isso. Finalmente, e isso vai voltar a esse último ponto - não é fácil. Você tem que colocar para fora todo o seu DIV, e então voltar e criar a CSS mágica que força os DIV para a posição correta e então passar algumas horas aprimorando-o até que ele está certo .... ugh. E, em seguida, olhando para o HTML sem um espectador realmente lhe dá idéia do que a página olha como porque é tudo reinterpretada pela CSS no final.

Agora, a opção B. Use uma mesa. Gastar cerca de 30 segundos digitando o e marcas, provavelmente nenhum CSS em tudo, sem javascript 'fixit', e saber exatamente o que ele vai olhar como só de olhar para o HTML.

É certo que existem argumentos a favor e contra tabelas, e os puristas parecem favorecer DIV para o layout, mas não use DIV por motivos religiosos só porque alguém lhe disse tabelas são maus. Use o que funciona melhor para você, sua página, ea maneira como seus espectadores vão interagir com a página. Se isso é uma mesa, em seguida, usá-lo. Se não, não.

Todo mundo, até agora, disse como as tabelas deve ser usado apenas para dados tabulares, e isso é verdade. Dê uma olhada em HTML de qualquer página do SO e você vai ver que eles têm uma idéia diferente ...

Eu acho que sua lógica é que às vezes usando uma tabela é apenas muito mais simples. No entanto, há uma série de razões muito boas usabilidade por que evitá-los.

Além de tabular dados , mesas são infelizmente, ainda necessário se você deseja criar flexível layouts de grade, tais como formulários complexos de forma compatível cross-browser.

CSS2 tem suporte para a criação de layouts de grade flexíveis sem usar o elemento table via propriedade de exibição do , mas esta é não é suportado no IE6 ou IE7 .

No entanto, para a maioria dos layouts formulário básico, CSS deve ser suficiente.

Se apenas o equivalente CSS foi como expediente na criação de uma "mesa-like" layout, então eu gostaria de uso CSS. Acho que o tempo que leva para imitar as coisas que os outros listados aqui (alturas iguais em células, auto-crescendo linhas, etc.) não é simplesmente vale o esforço. Eu não obter um retorno do meu investimento em oposição a jogar rapidamente juntos uma mesa na maioria dos casos.

Todos os navegadores podem concordar com exatamente como uma tabela deve ser colocado para fora. Bam. Feito.

Veja como minhas loucuras CSS costumam ir: Tente configurar um layout de tabela, como em CSS. Gastar 20 minutos ou mais recebendo tudo tão em Mozilla e depois abri-lo no IE. Gastar mais 30 minutos de ajustes entre esses dois navegadores. Fingir que há apenas dois navegadores do mundo, porque eu realmente precisa para obter algum trabalho feito.

Acredito na promessa de CSS: Separação de preocupações. O problema é que para aqueles que precisam de ser produtivo, CSS não está pronto para o horário nobre. Ou talvez seja os motores de renderização dos navegadores -. Qualquer

O benefício do CSS é que ele separa design e layout do conteúdo.

Se você tiver dados tabulares, então faz sentido usar um tag <TABLE>. Se você quiser layout diferente blocos de conteúdo, então você deve usar <DIV> ou <SPAN> e CSS.

As tabelas são para a saída de dados tabulares. Qualquer coisa que você pode exibir em uma planilha, colunas de resultados, esse tipo de coisa.

A sugestão de usar CSS em vez de tabelas é para layouts de colunas, que não eram realmente tabelas reais. Nunca houve a intenção de sugerir que as tabelas devem ser removidos completamente.

Tabelas não têm equivalente no CSS2, e eles não são tão fáceis de duplicar usando css. A parte específica de tabelas que é difícil de reproduzir é a auto-dimensionamento das colunas. Embora seja fácil deixar de crescer 1 linha para o mesmo tamanho do outro lado da página, é difícil para a próxima linha de igualar-se o tamanho da coluna ou cada tamanho da célula de forma dinâmica, e de fato não pode ser feito sem o uso de outras linguagens de script como JavaScript, PHP ou outros. Você pode usar larguras máximo e mínimo, bem como percentagens de ajuste para tamanhos de células, ou células código rígido largura de, mas as células que crescem de forma dinâmica funcionar bem para 1 linha, é a próxima linha abaixo dela que não vai corresponder-se.

A varredura sobre essas respostas, eu não ver uma razão do mundo real onde as mesas são necessárias para a disposição e que é e-mails HTML.

Eu trabalho para uma muito, muito grande empresa financeira e nós rastrear cerca de 600 trabalhos diferentes por mês .... muitos dos quais são várias campanhas de e-mail.

Você não pode usar CSS para a disposição para qualquer leitor mail. Existem algumas especificações CSS inline que você pode usar que se relacionam com a cor, tipo de fonte e tamanho e até mesmo line-height é bastante amplamente disponíveis, mas para o layout, você tem que usar tabelas como todas as grandes e a maioria dos leitores menor de e-mail (Outlook 97 / 03, Entourage, MSN etc) lê-los muito bem.

Os problemas com tabelas entram em jogo quando você tem de td que não têm altura / largura especificada se eles contêm dados ou não. Assim, 'quebrado' layouts são geralmente fixo, prestando atenção aos atributos e sim ... espaço em branco na html .... sim espaços em branco que não é suposto que importa.

Então, se você já trabalha para uma grande empresa / corporação ou você conseguir um grande cliente, estar pronto para jogar toda a tecnologia atual para fora da porta e obter o seu chapéu de tabela html on!

Eu acho que tudo depende do tempo / esforço. Enquanto um purista poderia dizer "só usam tabelas para dados tabulares," eu usei tabelas para facilitar layouts cross-browser no passado.

Para mim, é questão de utilização do tempo. Ou eu posso gastar meu tempo pôr em marcha afastado na CSS para acertar ou posso lançá-lo em uma mesa e gastar muito menos tempo com isso. I tendem a ir por esse caminho até que as coisas estão funcionando. Uma vez que a funcionalidade está lá, eu volto e polir o CSS / HTML.

Eu tenho que ir com as tabelas de abordar aqui. A razão para isto vem simplesmente para baixo para o custo. Até que uma abordagem CSS-centric bem suportado a disposição vem de fora, e eu estou falando sobre a nível macro ... não micro dentro de recipientes, tentando calçadeira posicionamento CSS em uma abordagem generalizada para layout é ineficiente. Você tem que abordar esta a partir da perspectiva da pessoa que escreve o cheque para o desenvolvimento.

Alguns anos atrás eu contratada para desenvolver e manter um site para uma grande cadeia de hotéis. Nós fomos com um layout impulsionado mesa; seu cabeçalho básico, corpo, rodapé com colunas esquerda / direita. Nós também usamos tabelas para alguns dos elementos mais finos como botões não-gráficos. controladora da cadeia manteve seu próprio site e foi com uma abordagem CSS puro para layout. Quando IE7 saiu nosso site funcionou perfeitamente sem quaisquer alterações. O site da empresa-mãe era uma bagunça. No geral eles gastaram cerca de 1000 horas totais (entre as reuniões / desenvolvimento / QA / rollout), que fixa as questões.

Quando você é pago para desenvolver uma parte local da sua responsabilidade é para mitigar riscos futuros e minimizar os custos de desenvolvimento futuro, particularmente se esses custos não agregam valor para o site (seu produto).

A minha opinião muito simples e básico sobre isso é que as mesas estão lá para dados tabulares -. Não para posicionar uma coisa em cima ou ao lado de um outro elemento, porque acontecer de você como se fosse estar lá

Portanto - se você deseja exibir uma tabela de dados: fazê-lo (com uma mesa). Se você quiser conteúdo posição na página:. Css uso

Eu acho que você pode ser um pouco confuso. CSS é um método de styling documentos HTML, se este é um elemento de tabela ou um 'div'.

Ela costumava ser que as tabelas foram usados ??em HTML para projetar todo o layout da página. Era comum ver várias tabelas aninhadas (normalmente gerados por programas WYSIWYG, como o Dreamweaver), e isso conduzirá a um pesadelo manutenção.

Desde a introdução e adoção de folhas de estilo CSS é agora correta apenas para usar uma tabela para dados tabulares. Isso significa que se os seus dados estão mais naturalmente prestados como usar a tabela de elemento de tabela. Você ainda pode estilo da tabela usando CSS.

No entanto, e eu geralmente desaprovam este método, uma vez que duplica a funcionalidade existente, é possível a utilização de elementos para construir uma tabela como a estrutura. Na verdade, existem vários website que irá gerar esse código para você, mas eu não tenho ligações a mão.

Lembre-se também que alguns usuários podem ser tanto a visualização em modo só de texto, ou usando um leitor de tela ambos os quais provavelmente vai quebrar a página (como ler as colunas verticalmente e não horizontalmente), portanto, o uso correto de tabelas.

HTH

Eu acredito e espero que a era do uso de tabelas para layout é ido. Simplificando: a tabela é uma tabela, nada mais

O que eu acho que vai ser o novo, tema semelhante, flamewar para próximos anos é: eu deveria usar novo recurso CSS visualização : tabela , mesa- célula , table-row etc. para layout ?? ? : -)

Eu acho que a razão pela qual isso vem à tona tanto é que usando tabelas HTML é mais fácil de entender quando a criação de estrutura e layout de CSS. Usando CSS é mais abstrato, mas ajuda a separar o seu código.
Em resposta ao argumento de "estrutura" ... por definição, não está usando tabelas HTML dando estrutura para dados para que você identificá-lo como "tabular". Quer se trate de CSS ou html você está controlando o fluxo e layout de dados. Seja tabular ou de outra forma ...
Se as tabelas CSS são tão importantes (e tenho certeza que a minha resposta vai começar algum tipo de guerra chama) por que não há um mecanismo no Visual Studio para criar um layout usando CSS? Oh, você não verificar o coisinha recurso de layout em VS? Sim, você tem tabelas, direto da Microsoft. Eu não estou reclamando, apenas fazendo o ponto que se isso significava tanto para o resto do mundo que você veria MS mudar para CSS.
Na minha opinião fazer o que melhor se encaixa com o seu projeto. Para um ou dois projetos web page eu continuo a usar html, porque o que ele faz é óbvio. Usando CSS é mais abstrato e algumas manhãs eu só não tive que muito café. tabelas HTML pode ficar confuso, rápido. CSS leva um pouco mais de tempo para se confuso, mas vai também.

Embora para alguns layouts usando tabelas pode parecer simples à primeira vista, quando o tempo de manutenção vem usando css compensa. Especialmente se você quiser mudar a posição de alguma coisa, ou se você quiser usar o mesmo layout em vários lugares.

IMHO, tabelas deve ser usado somente quando apresentar tabelas. Nunca para fins de layout.

As tabelas são usadas para exibir dados tabulares. Não há muito mais a acrescentar :-D

Se há uma razão para usar uma tabela de uma forma semântica (por exemplo, para mostrar dados tabulares) mesas de uso.

Apenas não usar tabelas para fazer coisas layout. Há muitos benefícios searchengine und de acessibilidade que você começa com marcação semântica.

A reserva de mesas para uso apenas para dados tabulares funciona na maioria das vezes. Há certos problemas de layout que são muito mais fácil de conseguir com tabelas do que qualquer outra coisa. Por exemplo, o alinhamento vertical e colunas de altura igual. Do outro lado da cerca, tem havido algumas tabelas de dados complexos que eu usei divs flutuou para porque as tabelas não estavam encaixando a conta.

Como qualquer outra coisa, use a ferramenta certa para o trabalho certo, e às vezes a ferramenta mais pragmática não é o que você acha que seria. Dito isto, eu raramente usam tabelas para layout, mesmo nos exemplos que dei, porque, inevitavelmente, eu bati algum problema que me faz ter que fazer isso com CSS de qualquer maneira. Sua milhagem pode variar.

Eu também não gosto da idéia de usar tabelas para organizar os itens em uma página. No entanto, este não deve se tornar uma religião - mesas são ruins. Eu encontrei um exemplo onde eu tenho um layout de três colunas e precisava da coluna central para crescer com o conteúdo. No final, a solução que foi o mais simples e funcionou bem em todos os navegadores necessários era usar uma tabela. IMHO CSS ainda tem algumas deficiências e às vezes é melhor simples uso algo que funciona em vez de apenas aderir cegamente a alguma idéia ( 'mesas são ruins ...').

Você pode até mesmo usá-los para layouting, se o seu layout é um pouco tabular. I como o recurso de tabelas e células ajustando dinamicamente a qualquer largura da janela do navegador é. Nunca use larguras ou altura fixa, isso é apenas bagunçar as coisas.

É fácil. Acha que sua página da web como uma página real no papel. Você deve usar tabelas na página somente quando você desenhar uma tabela em seu papel.

Outra dica é usar a tabela apenas com fronteira> 0. Dessa forma, você usar tabelas apenas quando você média você quer uma mesa (e não para o layout).

@toddhd, defendendo o uso de tabelas para layout simplesmente para economizar tempo é um policial fora. Se o tempo é o problema, então você pode criar rapidamente um layout de coluna sem tabelas usando uma estrutura como Blueprint CSS ou 960 Grade .

Parece depender do que os navegadores eram capazes de quando você começou a desenhar. Se você começou para trás quando apenas as tabelas trabalhou, então, que é o que você provavelmente sempre quer usar, porque você sabe disso. Ou se é isso que você gostava de usar, mesmo depois de navegadores tinha avançado para ser capaz de processar CSS ...

Eu só não gosto de continuar fazendo as mesmas coisas repetidas porque eles são fáceis e eu sei como fazer them.That é chato. Eu prefiro muito mais aprender novas técnicas que rejeitar algo porque eu não sei como usá-lo ou eu acho que eu não tenho tempo para aprender.

Eu não gosto de quadros de empregos, eu não entendo eles, eles parecem estranhos e ofensiva, mas isso é porque eu comecei em 2005. Eu também não uso programas de design para cuspir modelos porque eu prefiro mão de codificação .

Eu estou indo supor que a sua pergunta é, na verdade - "Devo evitar usando tabelas HTML para fins de layout?" . A resposta é: Não. Na verdade, as tabelas são especificamente destinados a serem utilizados para layout de controle. A desvantagem para o uso de tabelas para controlar o layout de uma página inteira é que o arquivo de origem torna-se rapidamente difícil de entender e editar manualmente. A (possível) vantagem de usar tabelas para controlar todo o layout é se há preocupações específicas sobre a compatibilidade cross-browser e renderização. Prefiro trabalhar diretamente com o arquivo HTML, e para mim usando CSS marcas que mais fácil do que usar tabelas para todo o layout.

Tabelas só fazem sentido quando você está tentando exibir dados tabulares e é isso. Para layouts, você deve sempre usar DIVs e jogar com posicionamentos CSS.

Se você precisa usar uma tabela, seu layout, provavelmente, é uma porcaria. Mostre-me um único projetado bem site que usa tabelas, e eu vou mostrar-lhe um mil que não.

Um monte de pessoas estão jogando em torno do termo "purista". Isso é lixo. Você imprimir cópia do jornal em um livro? Você projetar uma brochura com o Excel? Não? Então por que você iria usar uma tabela para exibir dados não-tabular?

Na maioria das vezes as dificuldades que as pessoas enfrentam em deixar ir de tabelas para layout é resultado de sua própria ignorância de HTML / CSS / bons princípios de organização. Enquanto você pode achar que é difícil fazer layouts de várias colunas estender uniformemente na direção vertical, você poderia pensar em tentar um método diferente. DIVs não são tabelas. Você pode fazer colunas faux usando bordas largas, fundos de página, etc. Passe algum tempo realmente aprender a fazer o que você está definindo a fazer, ou para sempre ser visto como alguém sem qualquer tipo de habilidade útil. ( http://www.alistapart.com seria um bom começo)

Eu estou honestamente surpreso que esta questão está surgindo em 2008. DIVs deu a volta quando eu estava no colégio. Pare de ser um noob.

E como foi mencionado acima, as tabelas falhar duro em dispositivos móveis e leitores de tela.

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

Não afiliado a StackOverflow