How to put two forms side by side?

0

Good afternoon!

In a PHP file, you have an HTML form that contains a table and a submit . It also has a second form with another table and a 'submit'. How to put the second form next to the first one and the third table have to stay below the first two? Follow the code.

<body bgcolor="#FFFFF0">
<form id="localizacao" name="localizacao" method="post" action="rastreamento.php" onsubmit="return validaCampoLoca(); return false;">
  <table width="50%" border="1">
      <tr><div align="center"><img src=img/logo.jpg></div></tr>
	  <tr><th colspan="5" align="center" valign="top"><h2>Localizacao de Carga</h2></th>
	  </tr>
    <tr>
      <td width="50">CNPJ:</td>
      <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
        <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
		<td width="156">Selecione o STATUS:</td>
		<td><select name="status" id="status">
		    <option value="0">Recebido</option>
  			<option value="1">Em trânsito</option>
  			<option value="2">Encerrado</option>
  			</select></td>		
    </tr>    	
    <tr>
	  <td colspan="2"><p>
        <input name="cadastrar" type="submit" id="cadastrar" value="OK" /> 
        <br />
          <input name="limpar" type="reset" id="limpar" value="Limpar!" />
          <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<form id="alteracoes" name="alteracoes" method="post" action="rastreamento.php" onsubmit="return validaCampoAltera(); return false;">  
  <table width="50%" border="1">
   <tr><th colspan="5" align="center" valign="top"><h2>Alteracoes</h2></th></tr>
   <tr>
      <td width="50">VIAGEM:</td>
      <td width="835"><input name="VIAGEM" type="text" id="VIAGEM" size="20" maxlength="14" />        
   </tr>
   <tr>
      <td width="50">NOVO STATUS:</td>
      <td width="835"><input name="NVSTATUS" type="text" id="NVSTATUS" size="1" maxlength="1" />        
   </tr>
   <tr>
      <td width="50">EMBARCACAO:</td>
      <td width="835"><input name="EMBARC" type="text" id="EMBARC" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA SAIDA:</td>
      <td width="835"><input name="DATSAI" type="text" id="DATSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA SAIDA:</td>
      <td width="835"><input name="HORSAI" type="text" id="HORSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA CHEGADA:</td>
      <td width="835"><input name="DATCH" type="text" id="DATCH" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA CHEGADA:</td>
      <td width="835"><input name="HORCHE" type="text" id="HORCHE" size="20" maxlength="10" />        
   </tr>   
   <tr>
	  <td colspan="2"><p>
        <input name="atualizar" type="submit" id="atualizar" value="ATUALIZAR" /> 
        <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript">
function validaCampoLoca()
{
if(document.localizacao.CNPJ.value=="")
	{
	alert("O Campo CNPJ é obrigatorio!");
	return false;
	}
else	
return true;
}
function validaCampoAltera()
{
if(document.alteracoes.VIAGEM.value=="")
	{
	alert("O Campo VIAGEM é obrigatório!");
	return false;
	}
else
return true;
}
// Fim do JavaScript que validará os campos obrigatórios!
</script>
	<!-- Lista cada documento de acordo com o CNPJ e o STATUS-->		
<table width="100%" border="1">
	<thead><tr>
	<th align="center">CNPJ</th>
	<th align="center">Data rec</th>
	<th align="center">Tipo Doc</th>
	<th>N&ordm; Doc</th>
	<th>Quant. Vol</th>
	<th>Processo</th>
	<th>Loc. Ent.</th>
	<th>Fornec</th>
	<th>Status</th>
	</tr></thead>
	
	<tbody>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		
		</tr>
		
	</tbody></table>

</body>
    
asked by anonymous 11.07.2018 / 00:05

1 answer

1

The align="left" ( <table align="left"> ) attribute causes the table to align to the left of the following elements, but this attribute has become obsolete in HTML5. You can use float: left that the tables will be side-by-side unless the screen is too narrow where the minimum width of the tables does not allow one to stand side by side.

As the last table has a total width of 100%, it will always be below the first two (run the example below in full screen):

table{
   float: left;
}
<form id="localizacao" name="localizacao" method="post" action="rastreamento.php" onsubmit="return validaCampoLoca(); return false;">
  <table width="50%" border="1">
      <tr><div align="center"><img src=img/logo.jpg></div></tr>
	  <tr><th colspan="5" align="center" valign="top"><h2>Localizacao de Carga</h2></th>
	  </tr>
    <tr>
      <td width="50">CNPJ:</td>
      <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
        <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
		<td width="156">Selecione o STATUS:</td>
		<td><select name="status" id="status">
		    <option value="0">Recebido</option>
  			<option value="1">Em trânsito</option>
  			<option value="2">Encerrado</option>
  			</select></td>		
    </tr>    	
    <tr>
	  <td colspan="2"><p>
        <input name="cadastrar" type="submit" id="cadastrar" value="OK" /> 
        <br />
          <input name="limpar" type="reset" id="limpar" value="Limpar!" />
          <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<form id="alteracoes" name="alteracoes" method="post" action="rastreamento.php" onsubmit="return validaCampoAltera(); return false;">  
  <table width="50%" border="1">
   <tr><th colspan="5" align="center" valign="top"><h2>Alteracoes</h2></th></tr>
   <tr>
      <td width="50">VIAGEM:</td>
      <td width="835"><input name="VIAGEM" type="text" id="VIAGEM" size="20" maxlength="14" />        
   </tr>
   <tr>
      <td width="50">NOVO STATUS:</td>
      <td width="835"><input name="NVSTATUS" type="text" id="NVSTATUS" size="1" maxlength="1" />        
   </tr>
   <tr>
      <td width="50">EMBARCACAO:</td>
      <td width="835"><input name="EMBARC" type="text" id="EMBARC" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA SAIDA:</td>
      <td width="835"><input name="DATSAI" type="text" id="DATSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA SAIDA:</td>
      <td width="835"><input name="HORSAI" type="text" id="HORSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA CHEGADA:</td>
      <td width="835"><input name="DATCH" type="text" id="DATCH" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA CHEGADA:</td>
      <td width="835"><input name="HORCHE" type="text" id="HORCHE" size="20" maxlength="10" />        
   </tr>   
   <tr>
	  <td colspan="2"><p>
        <input name="atualizar" type="submit" id="atualizar" value="ATUALIZAR" /> 
        <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<table width="100%" border="1">
	<thead><tr>
	<th align="center">CNPJ</th>
	<th align="center">Data rec</th>
	<th align="center">Tipo Doc</th>
	<th>N&ordm; Doc</th>
	<th>Quant. Vol</th>
	<th>Processo</th>
	<th>Loc. Ent.</th>
	<th>Fornec</th>
	<th>Status</th>
	</tr></thead>
	
	<tbody>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		
		</tr>
		
	</tbody></table>
    
11.07.2018 / 02:40