Botão fora - table

Front-end

17/12/2015

Me ajudem, acho que esse probleminha é simples.


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
	<form method="post" action="30_formulario03.html">
			
			<table width="600" border="1" align="center" cellpadding="5">
			
				<tr>					
					<td>Campo de arquivo:</td>
					<td><input type="file" name="nomeDoCampo" id="idDoCampo" /></td>				
				</tr>				
				<tr>					
					<td>Campo de texto livre:</td>
					<td>
						<textarea name="campoDeMensagem" id="idDoCampoDeMensagem" cols="45" rows="10" placeholder="Insira o texto"></textarea>
					</td>				
				</tr>				
				<tr>					
					<td>Botões:</td>
					<td><input type="submit" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para enviar"/></td>
					<td><input type="reset" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para limpar"/></td>
				</tr>			
			</table>
		
		</form>
</body>
</html>


[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20151217-095648.jpg[/img]
Marcelo Pastore

Marcelo Pastore

Curtidas 0

Respostas

Wazowski

Wazowski

17/12/2015

Olha, eu não manjo nada disso. Mas lendo o seu código entendo que os <tr> </tr> sejam linhas e <td></td> sejam colunas.
Sua tabela tem 2 colunas. Ai voce tem na terceira linha:

<td>Botões:</td> PRIMEIRA COLUNA
<td><input type="submit" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para enviar"/></td> SEGUNDA COLUNA
<td><input type="reset" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para limpar"/></td> TERCEIRA COLUNA (fora da tabela)

não pode simplesmente fazer assim?

<td>Botões:</td>
<td><input type="submit" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para enviar"/>
<input type="reset" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para limpar"/></td>
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

17/12/2015

Acabei de esquecer um detalhe, sem o bootstrap fica assim:

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20151217-135221.jpg[/img]
GOSTEI 0
Moisés

Moisés

17/12/2015

Marcelo teste assim!

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <form method="post" action="30_formulario03.html">
             
            <table width="600" border="1" align="center" cellpadding="5">
             
                <tr>                  
                    <td>Campo de arquivo:</td>
                    <td><input type="file" name="nomeDoCampo" id="idDoCampo" /></td>              
                </tr>             
                <tr>                  
                    <td>Campo de texto livre:</td>
                    <td>
                        <textarea name="campoDeMensagem" id="idDoCampoDeMensagem" cols="45" rows="10" placeholder="Insira o texto"></textarea>
                    </td>             
                </tr>             
                <tr>                  
                    <td>Botões:</td>
                    <td><input type="submit" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para enviar"/>
                    <input type="reset" name="botãoSubmit" id="idBotaoSubmit" value="Clique aqui para limpar"/></td>
                </tr>         
            </table>
         
        </form>
</body>
</html>
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

17/12/2015

Melhorou bastante agora! Obrigado.

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20151217-161227.jpg[/img]
GOSTEI 0
Moisés

Moisés

17/12/2015

De nada!
GOSTEI 0
Jothaz

Jothaz

17/12/2015

Só uma dúvida se vai usar table para criar layout para que o bootstrap?

Pois não faz sentido.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

17/12/2015

Peguei de uma video aula. Creio que seja apenas para apresentar.
GOSTEI 0
Jothaz

Jothaz

17/12/2015

Só me confundiu um pouco, pois misturar tables e lay-out responsivos (bootstrap) é como misturar água e óleo, não rola.

Como é uma vídeo aula quero crer que estão mostrando a forma desaconselhável de se criar um lay-out (tables) posteriormente a foram mais indicada divs (bootstrap).

Em todo o caso como você esta iniciando sugiro um leitura sobre tableless e layout fluído.

No mais bons estudos.

[url:descricao=Tableless: Criando um site dentro dos padrões]https://www.devmedia.com.br/tableless-criando-um-site-dentro-dos-padroes/30502[/url]

[url:descricao=Tutorial Tableless Básico em HTML5 – Layout de 3 colunas]http://tableless.com.br/tutorial-tableless/[/url]

[url:descricao=Layout Fluido ou Líquido]http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido[/url]

[url:descricao=Layout Fluído ou Responsivo]https://www.turbosite.com.br/blog/layout-fluido-ou-responsivo/[/url]
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

17/12/2015

Obrigado pelos esclarecimentos e os links! Abraço.
GOSTEI 0
POSTAR