Благодаря тегу <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>
Чтобы получить ячейку, которая занимает больше столбцов, мы используем атрибут 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.
