html таблицы rowspan

Question

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

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

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

.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>

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

Answer 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>

БЛОГ НА HUSL

html таблицы rowspan

Ответы (1 шт):