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>

Ваш ответ

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

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