Is it wrong to structure a form with tables?

Question

Is it wrong to structure a form with tables?

Navigation

#1 by (8 votes)
#2 by (3 votes)

9

Today with HTML5/CSS3 and its many ways to align elements (divs)

Is it wrong to structure a form with a table? For example:

<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>

html5

asked by anonymous 22.10.2015 / 18:03

2 answers

3

Not wrong but out of HTML5 standards. The ideal would be to use divs and stylize them using CSS. There are frameworks that make layout design work easier, such as Grid960 . This framework provides ready-made classes for structuring HTML through divs, making the work much easier

22.10.2015 / 18:20

How to save a cascaded collection in nhibernate without putting circular reference? What is XHTML and when should it be used?

score 8 · Accepted Answer

Tableless

Tables exist in HTML for a single reason: To display tabular data. But then with border="0" it became possible for designers to have a grid on which to place images and text. thus, designing visually rich Web sites, the use of tables is actually a way of interfering with the development of a better, more accessible, flexible and functional Web. Let's see what the problems are:

Home

In the beginning, the Internet was essentially a medium for academics, researchers, and the military to share information. However, it did not take long for business visionaries to realize that this new medium of communication was ideal for selling everything from fresh produce to hot dogs.

However, like anything in its infancy, the Internet at first was aesthetically 'raw' (and not appealing to consumers) until David Siegel published his reference book, which offered some brilliant solutions to the limitations of existing browsers, and W3C specifications.

Problems with Tables

Blend presentation data with content.
- This makes your page size unnecessarily large, so users need to download this presentation data every time they visit the page.
- Band is not infinite, in fact, it is very scarce.
This makes redesigning existing sites and adding content, becomes an extremely difficult (and expensive) job.
This also makes it extremely difficult (and expensive) to maintain the complete visual consistency of every page in a site.
Table-based pages are also much less accessible using smartphones.

Best practice

Modern web-browsers follow Web standards and we do not need to use these archaic methods anymore for page building.

Instead of tables within tables, causing a huge problem to deal with later, we can use CSS to define positions and are faster to load, easier to redraw, and more accessible to all.

Use table only where you're sure it's a table

Where to use it then?

We should use the table tag with tabular data. Think as if it were an excel, normally data represented in excel, are tabular data, follow an example:

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>