0

Мне необходимо сделать такую таблицу

введите сюда описание изображения

Но получается так

введите сюда описание изображения

Не понимаю, в чём ошибаюсь

.table {
  border-collapse: collapse;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
}
<table class="table">

  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <th rowspan="5">Автор фотографии</th>
      <td rowspan="2">Фамилия И.О.</td>
      <td rowspan="2">
        <input type="text" placeholder="Введите ваше имя">
      </td>
    </tr>

    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>

    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>

  </tbody>

</table>

Я думал, что линии нужно так раставить

введите сюда описание изображения

1 ответ 1

1

Пример

по колонкам

1 tbody row - td(rowspan5) td td

2 tbody row - td(rowspan2) td

3 tbody row - td

4 tbody row - td td

.table {
  border-collapse: collapse;
  width: 100%;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
  font-size: 1.2em;
}

.td-family {
  height: 70px;
}
<table class="table">
  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4"><strong>Автор фотографии</strong></td>
      <td class="td-family">Фамилия И.О.</td>
      <td><input type="text" placeholder="Введите ваше имя"></td>
    </tr>
    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>
    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

10
  • 1
    сделал на 3 colspan="3" - это не играет роль, главное чтобы на остальных колонках в сумме также было
    – soledar10
    6 авг 2022 в 10:07
  • У меня поле Фамилия И.О. должно быть такого же размера, как Пол. Я пытаюсь поправить, но получается также, как у меня изначально было 6 авг 2022 в 10:13
  • @Михаил Камахин - добавил описание
    – soledar10
    6 авг 2022 в 10:25
  • Благодарю, но у меня всё равно не получается сделать так, чтобы Фамилия И.О. были такого же размера, как Пол 6 авг 2022 в 10:28
  • @Михаил Камахин - обновил
    – soledar10
    6 авг 2022 в 10:34

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.