Use table or not

Navigation
2

I need to position labels controls, exactly one underneath the other and sometimes to the side. I do this with a table, but I ask. Is there another way to do this and give a result similar to table? Table is legible, and everything mine is dynamic.

    
asked by anonymous 08.05.2014 / 01:46

2 answers

2

Why escape the tables? They are there to be used (just will not use them to position layout, please). Anyway, of course there is.

Consider the following HTML: 

<form action="">

<fieldset>
<legend>Nosso form</legend>

<label><span>Nome:</span>
<input type="text" size="25" /></label>

<label><span>Idade:</span>
<input type="text" size="25" /></label>

<label><span>Besteiras:</span>
<textarea rows="10" cols="23"></textarea></label>

<label><span>Nome de novo:</span>
<input type="text" size="25" /></label>

<div><input type="submit" class="submit" 
            name="submit" value="Enviar" /></div>

</fieldset>
</form>

Here's our first example: 

fieldset span { float: left; width: 6em; text-align: right; }
label { display: block; margin: 0; padding: 0;}
input, textarea { text-align: left; }
input.submit    { text-align: center; }

example 1

Second example, only more elegant: 

fieldset span { float: left; width: 6em; text-align: right; }
label { display: block; margin: 0; padding: 0;}
input, textarea { text-align: left; }
input.submit    { text-align: center; }

body   { font-size: 80%; }
label, input.submit, legend, fieldset { font: normal 1em 
       Verdana, Geneva, Arial, Helvetica, sans-serif; }


legend { padding: 1em; }
label  { margin: 0.5em; }
fieldset { padding: 1em; }
fieldset div  { margin: 0.5em; padding-left: 6.5em; }
fieldset span { padding-right: 0.5em; }

example 2

    
08.05.2014 / 02:50
2

Bootstrap uses a grid structure that would help you a lot.

See the official documentation here .

    
08.05.2014 / 03:16
Enable input when clicking the button inside the same row of a table Refresh the text of a Toast without expecting it to add up