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

В 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 используется, чтобы показать, что Alex работает и в утреннюю, и в вечернюю смену, не повторяя имя. 

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