Как установить заголовок в таблице html

Question

Я работаю с HTML таблицами и мне нужно создать заголовок определенным образом.

Мой желаемый результат показан на рисунке ниже. Но у меня возникают проблемы при получении этого результата, используя HTML & CSS.

Пока у меня есть код ниже, но результат не совсем правильно.

Как я могу изменить свой код, чтобы получить желаемый результат?

table{
  border-collapse: collapse;
  border: solid black 1px;
}

td {
  border: solid black 1px;
  padding: 5px;
}

<table>
  <tbody>
      <tr>
        <th rowspan="2">head</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
  </tbody>
</table>

Answer 1

Вы можете сделать это, удалив атрибут rowspan и используя вместо этого пустой заполнитель th в следующей строке. Затем просто установите рамку на видимом th (th.label) и удалите границу на table.

Полный пример:

table{
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}


th.label,
td {
  border: solid black 1px;
}

<table>
  <tbody>
      <tr>
        <th class="label">head</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <th></th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
  </tbody>
</table>

Answer 2

Вы можете удалить границу из table и добавить ее специально к th. Вы можете удалить атрибут rowspan и использовать вместо него class. Я добавил второй th, который служит только в качестве разделителя.

table {
  border-collapse: collapse;
}

td,
.hz-header {
  border: solid black 1px;
  padding: 5px;
}

<table>
  <tbody>
    <tr>
      <th class="hz-header">head</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <th></th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>