Position not correct html or css

Question

Hello, I made the form and the table now I can not figure it out:

how to put a position for each input a и label s in the form so that they are not in a row downwards, but along the middle and so on;
the position of the table does not coincide with the position of the data entry form as well as in a single line;

the actual code and the page itself:

 <?php include($_SERVER['DOCUMENT_ROOT'].'/Work_Log/main.php'); include('\Work_Log\include\content.php'); { ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Work_Log - Журнал регистрации поступивших в архив дел</title> <?php getHead(); ?> </head> <head> <div class='content'> <h3>Регистрации поступивших в архив дел</h3> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <div class='block' style=' max-height:500px; overflow-y:scroll' ;> </head> <form method="post" action='action/?method=addjournal1'> <span class="label"> Дата поступления </span> <input style="width: 10%;" type="date" class="input" name="date_start"> <span class="label"> Наименование дел </span> <input style="width: 10%;" type="text" class="input" name="named"> <span class="label"> Номер по архиву </span> <input style="width: 10%;" type="text" class="input" name="narchive"> <span class="label"> Номер по номенклатуре дел </span> <input style="width: 10%;" type="text" class="input" name="nomenkl"> <span class="label"> Количество листов в описи </span> <input style="width: 10%;" type="text" class="input" name="sopis"> <span class="label"> Количество листов в деле </span> <input style="width: 10%;" type="text" class="input" name="scase"> <span class="label">Срок окончание хранения </span> <input style="width: 10%;" type="date" class="input" name="date_end"> <span class="label">Подписи принимающего</span> <input style="width: 15%;" class="input" name="rsign"> <span class="label">Подписи сдающего </span> <input style="width: 15%;" class="input" name="rover"> <span class="label">Отметка об уничтожении </span> <input style="width: 15%;" class="input" name="destroy"> <br/> <br /><input type="submit" name="add" value="Добавить" /><br /> <br /> </form> </div> <body> <div class=log> <?php getlog(); ?> </div> <?php getMenu(); ?> <html> </html> <div class='content'> <h1>Журнал регистрации поступивших в архив дел</h1> <div class='block' style=' max-height:500px; overflow-y:scroll' ;> <table cellspacing="0" cellpadding="10" width="100%"> <tbody> <tr> <td rowspan="2"><b> №п\п </b></td> <td rowspan="2"><b> Дата поступление в архив </b></td> <td rowspan="2"><b> Наименование дел </b></td> <td colspan="2"><b> Номер </b></td> <td colspan="2"><b> Количество листов </b></td> <td rowspan="2"><b> Срок окончания хранения </b></td> <td colspan="2"><b> Подписи ответственных лиц </b></td> <td rowspan="2"><b> Отметка об уничтожении </b></td> </tr> <tr> <td><b>по архиву</b></td> <td><b>по номенклатуре дел</b></td> <td><b>в описи</b></td> <td><b>в деле</b></td> <td><b>принимающего </b></td> <td><b>сдающего</b></td> </tr> <?php getConect(); mysql_query("SET NAMES utf8"); $i=1; $query = mysql_query('SELECT * FROM `journal1`'); while($row = mysql_fetch_array($query) ) { echo "<tr><td>".$i."</td>"; echo "<td>".$row['date_start']."</td>"; echo "<td>".$row['named']."</td>"; echo "<td>".$row['narchive']."</td>"; echo "<td>".$row['nomenkl']."</td>"; echo "<td>".$row['sopis']."</td>"; echo "<td>".$row['scase']."</td>"; echo "<td>".$row['date_end']."</td>"; echo "<td>".$row['rsign']."</td>"; echo "<td>".$row['rover']."</td>"; echo "<td>".$row['destroy']."</td></tr>"; $i++; } ?> </tbody> </table> </div> </div> </body> </html> <?php } ?>

sorry if the code is terrible i'm new

Maybe it’s better to wrap the span i input in the div class and already work with the class, build it up as it should

Accepted Answer · 2019-02-07T09:25:58

  display: block;

If I understand their pictures correctly, or do you want to look like a table?

 *{ box-sizing: border-box } input { display: block; } table { border-collapse: collapse; } table input{ width: 100%; border: none; padding: 2px; } td { border: 1px solid grey; } .no-padding td{ padding: 0 }

 <form method="post" action='action/?method=addjournal1'> <span class="label"> Дата поступления </span> <input type="date" class="input" name="date_start"> <span class="label"> Наименование дел </span> <input type="text" class="input" name="named"> <span class="label"> Номер по архиву </span> <input type="text" class="input" name="narchive"> <span class="label"> Номер по номенклатуре дел </span> <input type="text" class="input" name="nomenkl"> <span class="label"> Количество листов в описи </span> <input type="text" class="input" name="sopis"> <span class="label"> Количество листов в деле </span> <input type="text" class="input" name="scase"> <span class="label">Срок окончание хранения </span> <input type="date" class="input" name="date_end"> <span class="label">Подписи принимающего</span> <input class="input" name="rsign"> <span class="label">Подписи сдающего </span> <input class="input" name="rover"> <span class="label">Отметка об уничтожении </span> <input class="input" name="destroy"> <br/> <br /><input type="submit" name="add" value="Добавить" /> </form> </div> <hr> <table cellspacing="0" cellpadding="10" width="100%"> <tbody> <tr> <td rowspan="2"><b> №п\п </b></td> <td rowspan="2"><b> Дата поступление в архив </b></td> <td rowspan="2"><b> Наименование дел </b></td> <td colspan="2"><b> Номер </b></td> <td colspan="2"><b> Количество листов </b></td> <td rowspan="2"><b> Срок окончания хранения </b></td> <td colspan="2"><b> Подписи ответственных лиц </b></td> <td rowspan="2"><b> Отметка об уничтожении </b></td> </tr> <tr> <td><b>по архиву</b></td> <td><b>по номенклатуре дел</b></td> <td><b>в описи</b></td> <td><b>в деле</b></td> <td><b>принимающего </b></td> <td><b>сдающего</b></td> </tr> <tr class="no-padding"> <td></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> <td><input/></td> </tr> </table> <hr> <body> <div class=log> <?php getlog(); ?> </div> <?php getMenu(); ?> <html> </html> <div class='content'> <h1>Журнал регистрации поступивших в архив дел</h1> <div class='block'> <table cellspacing="0" cellpadding="10" width="100%"> <tbody> <tr> <td rowspan="2"><b> №п\п </b></td> <td rowspan="2"><b> Дата поступление в архив </b></td> <td rowspan="2"><b> Наименование дел </b></td> <td colspan="2"><b> Номер </b></td> <td colspan="2"><b> Количество листов </b></td> <td rowspan="2"><b> Срок окончания хранения </b></td> <td colspan="2"><b> Подписи ответственных лиц </b></td> <td rowspan="2"><b> Отметка об уничтожении </b></td> </tr> <tr> <td><b>по архиву</b></td> <td><b>по номенклатуре дел</b></td> <td><b>в описи</b></td> <td><b>в деле</b></td> <td><b>принимающего </b></td> <td><b>сдающего</b></td> </tr> <?php getConect(); mysql_query("SET NAMES utf8"); $i=1; $query = mysql_query('SELECT * FROM `journal1`'); while($row = mysql_fetch_array($query) ) { echo "<tr><td>".$i."</td>"; echo "<td>".$row['date_start']."</td>"; echo "<td>".$row['named']."</td>"; echo "<td>".$row['narchive']."</td>"; echo "<td>".$row['nomenkl']."</td>"; echo "<td>".$row['sopis']."</td>"; echo "<td>".$row['scase']."</td>"; echo "<td>".$row['date_end']."</td>"; echo "<td>".$row['rsign']."</td>"; echo "<td>".$row['rover']."</td>"; echo "<td>".$row['destroy']."</td></tr>"; $i++; } ?> </tbody> </table> </div> </div> </body> </html> <?php } ?>

No, I did not understand you, the form remains the same, but the location (position) of data entry in the form should be different, it is possible, and the table below should be in the line not just to the right as it is in the picture but vice versa as the input form
There is no registration, there is a registration form and the form of a journal in the form of a table is here in the picture the registration form on top of it with the add button should not generally scroll down and as if everything in a row horizontally, not everything means there are several, then add, and everything but the magazine just need to align slightly to the left
I do not understand, it is unlikely column))) What exactly you want not to understand.
I corrected the example, there are several options, including an example form in the form of a table.

Position not correct html or css

1 answer 1

More articles: