Como criar uma tabela assim em HTML?

31 de julho de 2011 3 respostas

felipevs 31 de julho de 2011

Bom, eu queria criar uma tabela para colocar um formulário de cadastro … mas não queria que a coluna ficasse em uma linha só. Então como posso fazer uma tabela que tenha uma coluna assim ? vejam: http://imageshack.us/photo/my-images/853/semttuloeaq.png/

Vejam esse formulário
http://imageshack.us/photo/my-images/38/semttulobrr.png/
que criei… percebam que o nome cidade não está alinhado com o campo do CPF e RG … na frente da palavra cidade eu até selecionei os tracinhos
para vocês verem … eu consigo colocar o nome cidade para frente e para trás mas só dando espaços com os traços da mesma cor do background … não da para ver mas quando seleciona percebe que tem linhas dando o espaço …
pensei que dando um width na linha ia resolver… mas não funciona.
Confirmar senha não está alinhado com o campo CPF… eu quero assim … como posso da esse espaço no html?

3 Respostas

Mephy 31 de jul. de 2011

utilizando os atributos rowspan e colspan na tag

aquela imagem ali (não o formulário) deve ser feita com, no mínimo, 4 colunas, sendo que todos os campos utilizam 2 colspan, exceto o maior que utiliza 3, e o menor, que utiliza somente 1
além disso, você pode adicionar o atributo width para definir o tamanho de cada coluna

felipevs 31 de jul. de 2011

Isso mesmo, mas tem algum outro jeito ?

guisso 31 de jul. de 2011

Tem!

<html>
<head>
	<style type="text/css">
		span.curta {
			border: solid 1px #000000;
			width: 100px;
			float: left;
		}
		span.longa {
			border: solid 1px #000000;
			width: 200px;
			float: left;
		}
	</style>
</head>
<body>
	<table style="border:solid 1px #0000ff">
			<tr><td><span class="curta">A</span><span class="longa">A</span></td></tr>
			<tr><td><span class="curta">A</span><span class="longa">A</span></td></tr>
			<tr><td><span class="longa">A</span><span class="curta">A</span></td></tr>
			<tr><td><span class="curta">A</span><span class="longa">A</span></td></tr>
			<tr><td><span class="curta">A</span><span class="longa">A</span></td></tr>
		</tbody>	
	</table>
</body>
</html>

Altere bordas, cores, etc. a gosto.

Criado 31 de julho de 2011

Ultima resposta 31 de jul. de 2011

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados