2

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

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

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

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

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

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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