Скажите пожалуйста как сделать размер таблице как на фото?

HTML PHP

5 февраля 2026 1 ответ

скажите пожалуйста как сделать размер таблице как на фото

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;   &lt;title&gt;Форма регистрации на сайте знакомств&lt;/title&gt;   &lt;style&gt;     textarea {        margin-top: 10px;     }      table {       border-collapse: collapse;       width: 100%;     }      th, td {       border: 1px solid black;       padding: 8px;       text-align: left;     }      th {       background-color: lightgray;     }      .custom-table td:first-child {       width: 30%; /* Измените это значение, чтобы задать нужную ширину первого столбца */     }      .custom-table td:last-child {       width: 70%; /* Измените это значение, чтобы задать нужную ширину второго столбца */     }   &lt;/style&gt; &lt;/head&gt; &lt;body&gt;   &lt;h2&gt;Форма регистрации на сайте знакомств&lt;/h2&gt;   &lt;form action="обработчик.php" method="POST"&gt;     &lt;table class="custom-table"&gt;       &lt;tr&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="nickname"&gt;Ник:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="text" id="nickname" name="nickname" required&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="fullname"&gt;Ваше имя:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="text" id="fullname" name="fullname" required&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="password"&gt;Пароль:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="password" id="password" name="password" required&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="confirm_password"&gt;Повторите пароль:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="password" id="confirm_password" name="confirm_password" required&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="email"&gt;Email:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="email" id="email" name="email" required&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label for="photo"&gt;Фото:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;&lt;input type="file" id="photo" name="photo"&gt;&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td colspan="2"&gt;Ваши интересы&lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;           &lt;input type="checkbox" id="book1" name="book1" value="book1"&gt;           &lt;label for="book1"&gt;Книги&lt;/label&gt;&lt;br&gt;           &lt;input type="checkbox" id="book2" name="book2" value="book2"&gt;           &lt;label for="book2"&gt;Музыка&lt;/label&gt;&lt;br&gt;           &lt;input type="checkbox" id="book3" name="book3" value="book3"&gt;           &lt;label for="book3"&gt;Кино&lt;/label&gt;&lt;br&gt;         &lt;/td&gt;         &lt;td&gt;           &lt;input type="checkbox" id="food" name="food" value="food"&gt;           &lt;label for="food"&gt;Кухня&lt;/label&gt;&lt;br&gt;           &lt;input type="checkbox" id="fashion" name="fashion" value="fashion"&gt;           &lt;label for="fashion"&gt;Мода&lt;/label&gt;&lt;br&gt;           &lt;input type="checkbox" id="dance" name="dance" value="dance"&gt;           &lt;label for="dance"&gt;Танцы&lt;/label&gt;&lt;br&gt;         &lt;/td&gt;       &lt;/tr&gt;       &lt;tr&gt;         &lt;td&gt;&lt;label&gt;Пол:&lt;/label&gt;&lt;/td&gt;         &lt;td&gt;           &lt;input type="radio" id="male" name="gender" value="male"&gt;           &lt;label for="male"&gt;Мужской&lt;/label&gt;           &lt;input type="radio" id="female" name="gender" value="female"&gt;           &lt;label for="female"&gt;Женский&lt;/label&gt;         &lt;/td&gt;       &lt;/tr&gt;     &lt;/table&gt;     &lt;textarea id="about" name="about" rows="4" cols="50"&gt;&lt;/textarea&gt;     &lt;br&gt;     &lt;input type="submit" value="Отправить данные"&gt;     &lt;input type="reset" value="Сбросить данные"&gt;   &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

<!DOCTYPE html> <html> <head> <title>Форма регистрации на сайте знакомств</title> <style> textarea { margin-top: 10px; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: lightgray; } .custom-table td:first-child { width: 30%; /* Измените это значение, чтобы задать нужную ширину первого столбца */ } .custom-table td:last-child { width: 70%; /* Измените это значение, чтобы задать нужную ширину второго столбца */ } </style> </head> <body> <h2>Форма регистрации на сайте знакомств</h2> <form action="обработчик.php" method="POST"> <table class="custom-table"> <tr> </tr> <tr> <td><label for="nickname">Ник:</label></td> <td><input type="text" id="nickname" name="nickname" required></td> </tr> <tr> <td><label for="fullname">Ваше имя:</label></td> <td><input type="text" id="fullname" name="fullname" required></td> </tr> <tr> <td><label for="password">Пароль:</label></td> <td><input type="password" id="password" name="password" required></td> </tr> <tr> <td><label for="confirm_password">Повторите пароль:</label></td> <td><input type="password" id="confirm_password" name="confirm_password" required></td> </tr> <tr> <td><label for="email">Email:</label></td> <td><input type="email" id="email" name="email" required></td> </tr> <tr> <td><label for="photo">Фото:</label></td> <td><input type="file" id="photo" name="photo"></td> </tr> <tr> <td colspan="2">Ваши интересы</td> </tr> <tr> <td> <input type="checkbox" id="book1" name="book1" value="book1"> <label for="book1">Книги</label><br> <input type="checkbox" id="book2" name="book2" value="book2"> <label for="book2">Музыка</label><br> <input type="checkbox" id="book3" name="book3" value="book3"> <label for="book3">Кино</label><br> </td> <td> <input type="checkbox" id="food" name="food" value="food"> <label for="food">Кухня</label><br> <input type="checkbox" id="fashion" name="fashion" value="fashion"> <label for="fashion">Мода</label><br> <input type="checkbox" id="dance" name="dance" value="dance"> <label for="dance">Танцы</label><br> </td> </tr> <tr> <td><label>Пол:</label></td> <td> <input type="radio" id="male" name="gender" value="male"> <label for="male">Мужской</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Женский</label> </td> </tr> </table> <textarea id="about" name="about" rows="4" cols="50"></textarea> <br> <input type="submit" value="Отправить данные"> <input type="reset" value="Сбросить данные"> </form> </body> </html>

Дополнительно:

table {   max-width: 40px;   /* ну не 40, конечно, а подберите какая ширина вам нравится.     можно там в процентах писать, или em, rem, vw и прочие забавные единицы измерения */ }

table { max-width: 40px; /* ну не 40, конечно, а подберите какая ширина вам нравится. можно там в процентах писать, или em, rem, vw и прочие забавные единицы измерения */ }

Ответы:

Сделайте для формы контейнер и ограничьте его шириной.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Анна SEO Ответ

12 февраля 2026 в 08:54

Для установки размера таблицы в HTML вы можете использовать атрибуты width и height в теге

. Например, если вы хотите установить ширину таблицы в 500 пикселей и высоту в 300 пикселей, вы можете написать следующий код:

<table width="500">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

<table width="500"> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>

Если вам нужно установить размер ячеек в таблице, то вы можете использовать атрибуты width и height в теге

. Например, чтобы установить ширину первой ячейки в 200 пикселей и высоту в 100 пикселей, вы можете написать следующий код:

<table>
  <tr>
    <td width="200" height="100">Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

<table> <tr> <td width="200" height="100">Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>

Также вы можете использовать CSS для управления размерами таблицы и ячеек. Например, чтобы установить ширину таблицы в 500 пикселей и высоту в 300 пикселей с использованием CSS, вы можете написать следующий код:

 
  table {
    width: 500px;
    height: 300px;
  }
 
 
<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

table { width: 500px; height: 300px; } <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>

Используйте эти подходы, чтобы настроить размеры таблицы и ячеек в соответствии с вашими требованиями.

Скажите пожалуйста как сделать размер таблице как на фото?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно