Объединение различных строк html-таблицы

Question

Моя задача-создать таблицу (table), показанную на фото нижe:

Мне нужно использовать только html, а если это невозможно, то можно использовать минимальное количество css. У меня есть проблема, а именно при создании выделенных красным цветом полей в таблице:

Как объединить ячейки разных строк в одну ячейку ?

Answer 1

Атрибут rowspan для тега <td> устанавливает число ячеек, которые должны быть объединены по вертикали.

td, th {border:1px solid gray;}

<table>
<tr>
  <th>Header column 1</th>
  <th>Header column 2</th>
  <th>Header column 3</th>
  <th>Header column 4</th>
</tr>
  <tr>
    <td>Row 2 - Item 1</td>
    <td>Row 2 - Item 2</td>
    <td rowspan="2">Row 2 - Nested Table 1</td>
    <td>Row 2 - Item 4</td>
  </tr>
  <tr>
    <td>Row 3 Nested Table 2</td>
    <td>Row 3 - Item 2</td>
    <td rowspan="2">Row 3 - Item 3</td>
  </tr>
  <tr>
    <td>Row 4 - Item 1</td>
    <td>Row 4 - Item 2</td>
    <td>Row 4 - Item 3</td>
  </tr>
  <tr>
    <td colspan="4">Row 5 - Last row of outer table</td>
  </tr>
</table>

БЛОГ НА HUSL

Объединение различных строк html-таблицы

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