0

всем привет сделал форму и таблицу теперь не могу разобраться:

  1. как в форме поставить позицию для каждого inputa и labelы, чтобы они были не в ряд вниз, а рядом по середине и так далее;

  2. позиция таблицы не совпадает с позицией формы ввода данных ну как в одной линией;

собственно код и сама страничка :

<?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
	}
	?>

простите если код ужасный я новичок

1
  • Может лутше span i input обернуть в div class и уже работать с классом, выстраивать как надо
    – klifort
    7 фев 2019 в 9:19

1 ответ 1

1
  display: block;

Если я правильно понял их картинки, или вы хотите чтобы выглядела как таблица?

*{
  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
	}
	?>

4
  • нет чет я не понял вас, форма остается такой же но расположение (позиций )ввода данных в форме должны быть разные это возможно, а внизу таблица должна в линиию не чуть в право как она на картинке а наобарот по центру как форма ввода
    – user325039
    7 фев 2019 в 9:41
  • Не понимаю, как журнал? должен быть вид 7 фев 2019 в 10:13
  • нет кароче,есть форма регистраций и форма журнала в виде таблицы стоит вот на картинке форма регистраций сверху это с кнопкой добавить не должна вообще пролистоваться вниз а как бы все в ряд по горизонтали не все имеется ввиду там несколько , потом добавить, и все а журнал просто выровнить надо чуть влево
    – user325039
    7 фев 2019 в 10:21
  • Не понимаю, вряд колонка ))) Что именно хотите не понять. Подправил пример, там несколько вариантов, в том числе пример форму в виде таблицы. Нужно только обернуть формой и добавить кнопку отправки 7 фев 2019 в 10:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.