Colspan и Rowspan Таблицы HTML
Ячейки таблицы могут занимать более одного ряда и/или столбца.
Таблица HTML - Colspan
Чтобы заставить ячейку занимать несколько столбцов, используйте атрибут colspan.
Примечание: Значение colspan — это количество столбцов, которые она занимает.
Пример
Ячейка заголовка, занимающая два столбца.
Prompt
Таблица, в которой заголовок Name занимает два столбца с помощью colspan=2, плюс заголовок Age, затем две строки данных (Jill Smith 43, Eve Jackson 57).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colspan</title>
</head>
<body>
<table>
<tr>
<th colspan="2">Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
Таблица HTML - Rowspan
Чтобы заставить ячейку занимать несколько рядов, используйте атрибут rowspan.
Примечание: Значение rowspan — это количество рядов, которые она занимает.
Пример
Ячейка, занимающая два ряда.
Prompt
Таблица, в которой заголовок Phone занимает две строки с помощью rowspan=2, со строкой Name (Jill) и двумя номерами телефона (555-1234 и 555-8745).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rowspan</title>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Телефон</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>