Как объединить ячейки таблицы

Антон Шепель Фев 20, 2023 • 1 min read

Чтобы объединить ячейки в таблице HTML, можно использовать атрибуты rowspan и/или colspan в теге <td> или <th>, в зависимости от того, является ли ячейка обычной или заголовочной.

Атрибут rowspan указывает, сколько строк таблицы должна занимать ячейка, а атрибут colspan указывает, сколько столбцов таблицы должна занимать ячейка. Например, чтобы объединить две ячейки в первой строке таблицы, нужно использовать атрибут colspan=»2″ в первой ячейке:

<table>
  <tr>
    <th colspan="2">Заголовок</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

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

Атрибут rowspan может использоваться аналогично для объединения ячеек по вертикали:

<table>
  <tr>
    <th rowspan="2">Заголовок</th>
    <td>Ячейка 1</td>
  </tr>
  <tr>
    <td>Ячейка 2</td>
  </tr>
</table>

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