Объединить ячейки html

Благодаря тегу <table> мы увидели, как HTML позволяет нам представлять таблицы и заполнять ее данными, использовать группировки строк и столбцов. Теперь давайте посмотрим, как объединить две или более ячейки в одну. По сути, мы можем сделать так, чтобы поле занимало более одного столбца или более одной строки .

Объединение столбцов html colspan

Возьмем, к примеру, таблицу 3 × 3, где мы хотим, чтобы строка имела заголовок, содержащий 2 столбца:

<table>
	<thead>
		<tr><th colspan="2">обьедененый заголовок</th><th>заголовок</th></tr>
	</thead>
	<tbody>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
	</tbody>
</table>
обьединение столбцов html

Чтобы получить ячейку, которая занимает больше столбцов, мы используем атрибут colspan, который применяется к td и th как в нашем случае. Таким образом, например, мы указали заголовок, который применим к обоим столбцам ниже.

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

Для полноты мы также приведем пример с td и colspan.

<table>
	<thead>
		<tr><th>заголовок</th><th>заголовок</th><th>заголовок</th></tr>
	</thead>
	<tbody>
		<tr><td colspan="3">обьедененая ячейка</td>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
	</tbody>
</table>

Объединение строк html RowSpan

Чтобы получить ячейку, которая занимает более одной строки, мы используем атрибут rowspan аналогично тому, что мы сделали с colspan:

<table>
	<thead>
		<tr><th>заголовок</th><th>заголовок</th><th>заголовок</th></tr>
	</thead>
	<tbody>
		<tr><td rowspan="2">обьедененая ячейка</td><td>ячейка</td><td>ячейка</td>
		<tr><td>ячейка</td><td>ячейка</td></tr>
		<tr><td>ячейка</td><td>ячейка</td><td>ячейка</td></tr>
	</tbody>
</table>

Обратите внимание что в следующей строчке, после обьедененой ячейки, прописано 2 ячейки, а не 3.

обьеденение строк html

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *