[Resolvido] Alinhamento de Tabelas - Posicionamento

rafaelcrvs · Março 21, 2012

Olá,

Bom, estou criando um site pessoal e gostaria de uma ajuda, no momento, não estou conseguindo alinhar as tabelas conforme imagem abaixo:

Gostaria de colocar aquelas 4 tabelas de roupas para a direita, alinhando com o campo acima. O código está logo abaixo:

								<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/os3_c1.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x top"><img src="images/spacer.gif" width="200" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c2.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
								<tr>
									<td style="background: url(images/gr.gif) repeat-y left"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td width="500" height="0">									
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
											<td rowspan="3" width="97" align="center"><img src="images/loja.jpg" width="120" height="120" border="0" alt=""></td>
											<td rowspan="3" width="20" align="center"><img src="images/os3_top_line1.gif" width="1" height="120" border="0" alt=""></td>
											<td width="500" align="left"><div class="item_name">Loja: Acessórios Konk</div></td>
											<td width="500" align="left"><div class="item_name">Contato: 51-34753048</div></td>
										    </tr>

											<tr><td width="10" height="0" align="center"><div class="item_price"></div></td></tr>
										</table>
									</td>
									<td style="background: url(images/gr.gif) repeat-y top right"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
								</tr>

								<tr>
									<td><img src="images/os3_c4.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x bottom"><img src="images/spacer.gif" width="0" height="0" border="0" alt="0"></td>
									<td><img src="images/os3_c3.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
							</table>

						</td>
	</td>
</tr>
</table>
<div><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></div>
		<table border="0" cellpadding="0" cellspacing="0">
			<tr>
			<tr>
			<div><img src="images/spacer.gif" width="438" height="10" border="0" alt=""></div>
				<table border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td>

							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/os3_c1.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x top"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c2.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
								<tr>
									<td style="background: url(images/gr.gif) repeat-y left"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td width="187" height="115">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td rowspan="3" width="97" align="center"><img src="images/t1.jpg" width="82" height="80" border="0" alt=""></td>
												<td width="90"><div class="item_name">ProCotton(tm) Pocket T-Shirt</div></td>
											</tr>
											<tr><td width="90" height="45" align="center"><div class="item_price">$34.99</div></td></tr>
											<tr><td width="90" align="center"><a href="#"><img src="images/os3_info.gif" width="39" height="21" border="0" alt=""></a><a href="#"><img src="images/os3_buy.gif" width="38" height="21" border="0" alt=""></a></td></tr>
										</table>
									</td>
									<td style="background: url(images/gr.gif) repeat-y right"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
								</tr>
								<tr>
									<td><img src="images/os3_c4.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x bottom"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c3.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
							</table>

						</td>
						<td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
						<td>

							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/os3_c1.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x top"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c2.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
								<tr>
									<td style="background: url(images/gr.gif) repeat-y left"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td width="187" height="115">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td rowspan="3" width="97" align="center"><img src="images/t2.jpg"  border="0" alt=""></td>
												<td width="90"><div class="item_name">ProCotton(tm) Pocket T-Shirt</div></td>
											</tr>
											<tr><td width="90" height="45" align="center"><div class="item_price">$34.99</div></td></tr>
											<tr><td width="90" align="center"><a href="#"><img src="images/os3_info.gif" width="39" height="21" border="0" alt=""></a><a href="#"><img src="images/os3_buy.gif" width="38" height="21" border="0" alt=""></a></td></tr>
										</table>
									</td>
									<td style="background: url(images/gr.gif) repeat-y right"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
								</tr>
								<tr>
									<td><img src="images/os3_c4.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x bottom"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c3.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
							</table>

						</td>
					</tr>
					<tr><td colspan="3"><img src="images/spacer.gif" width="1" height="12" border="0" alt=""></td></tr>
					<tr>
						<td>

							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/os3_c1.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x top"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c2.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
								<tr>
									<td style="background: url(images/gr.gif) repeat-y left"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td width="187" height="115">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td rowspan="3" width="97" align="center"><img src="images/t3.jpg" border="0" alt=""></td>
												<td width="90"><div class="item_name">ProCotton(tm) Pocket T-Shirt</div></td>
											</tr>
											<tr><td width="90" height="45" align="center"><div class="item_price">$34.99</div></td></tr>
											<tr><td width="90" align="center"><a href="#"><img src="images/os3_info.gif" width="39" height="21" border="0" alt=""></a><a href="#"><img src="images/os3_buy.gif" width="38" height="21" border="0" alt=""></a></td></tr>
										</table>
									</td>
									<td style="background: url(images/gr.gif) repeat-y right"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
								</tr>
								<tr>
									<td><img src="images/os3_c4.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x bottom"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c3.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
							</table>

						</td>
						<td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
						<td>

							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/os3_c1.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x top"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c2.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
								<tr>
									<td style="background: url(images/gr.gif) repeat-y left"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td width="187" height="115">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td rowspan="3" width="97" align="center"><img src="images/t4.jpg"  border="0" alt=""></td>
												<td width="90"><div class="item_name">ProCotton(tm) Pocket T-Shirt</div></td>
											</tr>
											<tr><td width="90" height="45" align="center"><div class="item_price">$34.99</div></td></tr>
											<tr><td width="90" align="center"><a href="#"><img src="images/os3_info.gif" width="39" height="21" border="0" alt=""></a><a href="#"><img src="images/os3_buy.gif" width="38" height="21" border="0" alt=""></a></td></tr>
										</table>
									</td>
									<td style="background: url(images/gr.gif) repeat-y right"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
								</tr>
								<tr>
									<td><img src="images/os3_c4.gif" width="7" height="7" border="0" alt=""></td>
									<td style="background: url(images/gr.gif) repeat-x bottom"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
									<td><img src="images/os3_c3.gif" width="7" height="7" border="0" alt=""></td>
								</tr>
							</table>

						</td>
					</tr>
				</table>
			<div><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></div>
			</td></tr>
		</table>
<table border="0" cellpadding="0" cellspacing="0">

</table>

Outra dúvida:

Como eu posso alinhar aqueles dois campos que aparecer na tabela lá em cima? Colocar um campo abaixo do outro.

Atenciosamente,

Rafael

NetBoy16 · Março 21, 2012

Mano, nem use tabela pra fazer teu layout, nao é correto, use div, é bem mais facil e seu problema pode ser solucionado facilmente por div :thumbsup:

rafaelcrvs · Março 21, 2012

Amigão, obrigado pela ajuda, mas o primeiro caso eu já consegui resolver, agora falta o segundo caso, aonde eu quero colocar as informações abaixo da outra, lá na informação da loja. sabe me informar como proceder?

Abraços.

Obs: Este layout eu peguei pronto, então como eu não sou um conhecedor de HTML, apenas o básico do básico, eu estou futricando e mexendo aonde consigo ;)

NetBoy16 · Março 21, 2012

Pra pular linha basta usar <br />

Gerciley · Março 21, 2012

mesmo assim é 1000% recomendável uma leitura de uma apostila HTML (coisa mais simples do mundo) e uma boa estudada em CSS e desista definitivamente de tabelas,

NetBoy16 · Março 21, 2012

Citar
...e desista definitivamente de tabelas,

Correção:

Citar
...e desista definitivamente de tabelas para criação de layout, pois tabela serve para mostrar dados tabulares,

:bye:

rafaelcrvs · Março 21, 2012

Obrigado pelas respostas meus caros, com certeza vou ler sim umas apostilas em html. :D

Apenas outra coisa, eu não estou conseguindo colocar os dados na parte superior daquela tabela :(

ele fica smepre abaixo, então quando eu coloco mais dados abaixo, aparece tudo quebrado :(

NetBoy16 · Março 21, 2012

Ok, se precisar de ajuda estaremos aqui para auxilia-lo, bons estudos :thumbsup:

PS:Se puder me positiva, vlw :grin:

Arquivado

[Resolvido] Alinhamento de Tabelas - Posicionamento

Recommended Posts

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

problemas SEO no google (retorno)

Pergunta: gerar sitemap.xml

Pergunta: gerar sitemap.xml

Fóruns

Tempo Real

Informação importante