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

Для объединения ячеек таблицы в HTML используется атрибут rowspan или colspan.

Атрибут rowspan позволяет объединять ячейки по вертикали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько строк таблицы.

Пример:

<table>
  <tr>
    <td rowspan="2">Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
  </tr>
</table>

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

Атрибут colspan позволяет объединять ячейки по горизонтали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов таблицы.

Пример:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td colspan="2">Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
    <td>Ячейка 7</td>
  </tr>
</table>

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