Объединение строк и столбцов

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

Атрибут colspan используется для указания количества столбцов, на которые должна распространяться ячейка. Его добавляют к тегу <td> или <th> ячейки, которую нужно расширить.

Вот пример использования colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

В этом примере ячейка заголовка с текстом "Name" занимает два столбца. Это полезно для создания заголовка, охватывающего несколько столбцов. Вот как это выглядит:

Атрибут rowspan используется для указания количества строк, которые должна охватывать ячейка. Его также добавляют в тег <td> или <th> ячейки, которую нужно расширить.

Вот пример использования rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

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

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