The ideal is do not use tables, since the proposal for the table
is for data tabulation, as if it were the visible form of a database table for example.
In the documentation of W3C standards on the table
says the following:
Tables should not be used Purely as a Means to layout Document content as this may present problems when Rendering to non-visual media.
Free Translation:
Tables should not be used purely to structure the content in layout of a document, as this presents problems when rendered by non-visual media.
In short, tables may seem the easiest way to resolve these issues, but in the medium term, specifically when you need to change something is when the headache will come and you will regret bitterly for not choosing the right path. Believe me I’ve been there.
So the ideal way is to use div
's, better yet, the ideal way is to use a grid system like the one on Bootstrap for example. Another great advantage of using frameworks like Bootstrap is that they are designed to be responsive and you can build your form (and website in general) to be friendly on both devices with larger screens, such as desktop’s, as with smaller screens, as tablet’s and cell phones.
A functional responsive example of a form (run, click full screen and resize the browser to see responsiveness in action):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form action="cadastro" method="POST">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label>Primeiro Nome</label>
<input type="text" name="pnome" class="form-control" placeholder="Primeiro Nome">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label>Último Nome</label>
<input type="text" name="unome" class="form-control" placeholder="Último Nome">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label>E-mail</label>
<input type="email" name="email" class="form-control" placeholder="E-mail">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<label>Endereço</label>
<input type="text" name="endereco" class="form-control" placeholder="Endereço">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label>Bairro</label>
<input type="text" name="bairro" class="form-control" placeholder="Bairro">
</div>
</div>
<div class="col-md-1 col-sm-4 col-xs-12">
<div class="form-group">
<label>UF</label>
<select name="uf" class="form-control">
<option>Acre</option>
<option>Amazonas</option>
<option>Goiás</option>
<option>Santa Catarina</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="form-group">
<label>Cidade</label>
<select name="cidade" class="form-control">
<option>Porangatu</option>
<option>Manáus</option>
<option>Goiânia</option>
<option>Joinville</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"><button class="btn btn-primary" type="submit">Enviar</button></div>
</div>
</div>
</form>
Here’s a list of Frameworks CSS. I’m not sure everyone has Grid System.
Other Framework very interesting that has not in the previous list is the Materialize. Particularly I never used it, but visually I found it very attractive.
It depends a lot on how you will architect your code, in most of the sites and systems that I come across today use div, I would use Divs to make the code more streamlined and easier to maintain. I hope I helped. Hugs.
– Alexjunior012
Tables are to display data only, some use to align fields ...
– rray
Always use Ivs is recommended. Tables are for displaying data. You can use a front-end framework to speed up the creation of your form, such as bootstrap, for example: http://getbootstrap.com/
– Joao Paulo
Based on opinions why?
– Jorge B.
Anyone who says it is based on opinions is wrong. W3C’s recommendation is not to use Tables as an auxiliary for layouts, only for data.
– Joao Paulo