9

Hoje com o HTML5/CSS3 e suas inúmeras formas de alinhar os elementos (divs)

É errado estruturar um formulário com tabela? Por ex:

<form action="action" method="POST">
<table style="width:100%">
  <tr>
    <td>Nome</td>
    <td><input type="text"></td>    
    <td>Sobrenome</td>
    <td><input type="text"></td>        
  </tr>
  <tr>
    <td>Endereço</td>
    <td><input type="text"></td>    
    <td>Cidade</td>
    <td><input type="text"></td>    
    <td>Estado</td>
    <td><input type="text"></td>        
  </tr>
</table>
</form>
5
  • Acho que não é errado mas a ideia será estruturar com div's.
    – Jorge B.
    Commented 22/10/2015 às 16:06
  • Não é que "é errado", mas "não recomendável". Centrando tudo no CSS, fica bem mais facil a manutenção do código, alem da legibilidade.Sem contar que div's são mais flexiveis que as td's da table.
    – user28595
    Commented 22/10/2015 às 16:07
  • Independentemente do que você perguntou, essa tabela está desbalanceada, tem mais colunas na segunda linha. Faltou um colspan em uma das células da primeira linha.
    – bfavaretto
    Commented 22/10/2015 às 16:12
  • @bfavaretto sim, foi um exemplo apenas...a pergunta em si é a estruturação de um form, css ou atributos devem ser utilizados tanto em table ou em div
    – Rod
    Commented 22/10/2015 às 16:17
  • Errado é uma palavra muito forte. Por causa da recomendação tableless eu dira que é inapropriado Commented 22/10/2015 às 19:21

2 Respostas 2

8

Tableless

Tabelas existem em HTML por um único motivo: Para exibir dados tabulares. Mas, em seguida, com o border="0" tornou-se possível para designers ter uma grade sobre a qual colocar imagens e texto. sendo assim, projetar sites Web visualmente ricos, o uso de tabelas é na verdade, uma forma de interferir com o desenvolvimento de uma Web melhor, mais acessível, flexível e funcional. Vamos ver quais os problemas:

Inicio

No início, a Internet era essencialmente um meio para acadêmicos, pesquisadores, e militares para compartilhar informações. No entanto, não demorou muito para que os visionários empresariais perceberem que este novo meio de comunicação era o ideal para vender tudo, desde produtos frescos e cachorro-quente.

No entanto, como qualquer coisa em sua infância, a Internet no início era esteticamente 'cru' (e não era atraente para os consumidores) até que David Siegel publicou seu livro de referência, que ofereceu algumas soluções brilhantes para as limitações dos navegadores existentes e especificações do W3C.

Problemas com Tables

  • Mistura dados de apresentação com o conteúdo.
    • Isso faz com que tamanho de suas páginas fique desnecessariamente grandes, com isso, os usuários precisam baixar esses dados de apresentação toda vez que visitar a página.
    • Banda não é infinita, aliás, é bem escasso.
  • Isso faz com que redesenhar sites existentes e adicionar conteúdo, se torne um trabalho extremamente difícil (e caro).
  • Isso também faz com que seja extremamente difícil (e caro) manter a consistência visual completa de todas as páginas de um site.
  • Páginas baseada em tabela também são muito menos acessível usando smartphones.

Melhor prática

Web-browsers modernos seguem os padrões Web e nós não precisamos usar esses métodos arcaicos mais para a construção de páginas.

Em vez de tabelas dentro de tabelas, causando um problema enorme para tratar depois, podemos usar CSS para definir posições e são mais rápidos para carregar, mais fácil para redesenhar, e mais acessível a todos.

Utilize table somente onde você tem certeza que é uma table

Onde utilizar então?

Devemos utilizar com data tabular a tag table. Pense como se fosse um excel, normalmente dados representados no excel, são dados tabulares, segue um exemplo:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
<table style="width:100%">
  <caption>Economia mensal</caption>
  <tr>
    <th>Mês</th>
    <th>Economizado</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>R$ 100</td>
  </tr>
  <tr>
    <td>Fevereiro</td>
    <td>R$ 50</td>
  </tr>
</table>

5
  • 1
    Só para deixar claro, tabelas (inclusive aninhadas em vários níveis) só foram usadas para layout porque foram por um bom tempo a única maneira cross-browser de se conseguir o resultado desejado. Quem não tem cão, caça com gato.
    – bfavaretto
    Commented 22/10/2015 às 16:28
  • Sim, é verdade.
    – guiandmag
    Commented 22/10/2015 às 16:29
  • Gostei da resposta, se possível, complemente em quais casos deve-se utilizar table, já que segundo a W3C table ainda continua existindo...Exemplifique casos em que se deve utilizar table :)
    – Rod
    Commented 22/10/2015 às 16:29
  • Coloquei um exemplo bem simples, mas passa a ideia de onde utilizar.
    – guiandmag
    Commented 22/10/2015 às 16:35
  • @guiandmag passou sim...em reports, datagrids, obrigado!
    – Rod
    Commented 22/10/2015 às 16:36
3

Não está errado mas está fora dos padrões do HTML5. O ideal seria usar divs e estilizá-las usando CSS. Existem frameworks que facilitam o trabalho de criação de estruturação do layout como o Grid960. Este framework disponibiliza classes prontas para estruturação do HTML através de divs, facilitando muito o trabalho

2
  • não conhecia esse Amanda, obrigado.
    – RFL
    Commented 22/10/2015 às 16:32
  • @RafaelAcioly é um dos mais "famosos" grids css que existe, um dos pioneiros para falar a verdade... :)
    – Rod
    Commented 22/10/2015 às 16:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .