Preciso posicionar controles labels, exatamente um em baixo do outro e às vezes ao lado. Faço isso com table, mas pergunto. Existe outra forma de fazer isso e dar um resultado semelhante a table? Table é braçal, e tudo meu é dinâmico.
-
1Tabelas são para exibir dados em formato tabular. Para layout, o recomendado é usar CSS. Isso não precisa ser levado a ferro e fogo, é claro, mas de um modo geral tudo o que pode ser feito com table pode também ser feito com CSS, você só precisa tirar um tempinho pra aprender. E se seu conteúdo é dinâmico ainda por cima, o benefício de se usar CSS fica ainda maior: porque você não precisa mexer no código que gera o markup quando você só quer alterar a apresentação/aparência.– mgibsonbrCommented 8/05/2014 às 1:50
Adicione um comentário
|
2 Respostas
Por que fugir das tables? Elas estão aí para serem utilizadas (só não vai utilizar elas para posicionar layout, por favor). Enfim, claro que há.
Considere o seguinte 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>
Temos aqui nosso primeiro exemplo:
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; }
Segundo exemplo, só que mais elegante:
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; }
-
1Bons exemplos. Mas a resposta só mereceria um +1 (da minha parte) se os detalhes fossem explicados. :) Commented 8/05/2014 às 1:09