Обычно таблицы в HTML используют в их привычном виде - т.е. когда количество столбцов одинаково в каждой строке. Но, предположим, необходимо объединить несколько столбцов в один, например, в шапке таблице.
Атрибуты colspan и rowspan для ячеек (td, th)
Для этого в одной из ячеек таблицы необходимо использовать атрибут colspan="цифра", где цифра показывает, сколько же столбцов мы намерены объединить.
Такая же ситуация с объединением строк - необходимо также использовать атрибут, но rowspan="цифра". Цифра указывает на количество объединяемых строк.
Например, нам необходимо создать такую таблицу:
Видно, что в этой таблице есть объединение по строкам в самом верху, там, где столбцы "№ п/п" и "Название". Также сразу видно, что объединять нужно 2 строки, поэтому будем использовать атрибут rowspan="2".
Также нужно объединить 4 ячейки в одну с текстом "Цена". Такое же объединение по столбцам необходимо в самой нижней правой ячейке. Поэтому в этих 2-х местах в коде будем использовать атрибут colspan="4":
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<table> <caption>Стоимость товаров по размерам</caption> <tr> <th rowspan="2">№ п/п</th> <th rowspan="2">Название</th> <th colspan="4">Цена, грн</th> </tr> <tr> <th>M</th> <th>L</th> <th>XL</th> <th>XXL</th> </tr> <tr> <td>1</td> <td>Юбка в клетку</td> <td>400</td> <td>450</td> <td>500</td> <td>550</td> </tr> <tr> <td>2</td> <td>Брюки в полоску</td> <td>520</td> <td>580</td> <td>640</td> <td>680</td> </tr> <tr> <td>3</td> <td>Симпатичное платье с принтом</td> <td>300</td> <td>340</td> <td>390</td> <td>450</td> </tr> <tr> <td>4</td> <td>Сумочка с блестками</td> <td colspan="4">480</td> </tr> </table> |
Если заняться подсчетом ячеек в каждой строке, то получается интересная ситуация:
- в первой строке ячеек 3
- во второй - 4
- в третьей, четвертой и пятой строках - 6 ячеек
- в последней, шестой - опять 3
Для чего был нужен такой подсчет? Дело все в том, что любой из атрибутов - colspan или rowspan как бы "съедает" ячейки во время объединения. Но colspan убирает их количество в текущей строке, а rowspan - в следующей.
Поэтому при создании сложных таблиц с объединениями ячеек необходимо сначала подсчитать, сколько должно быть строк и столбцов изначально, создать структуру этой таблицы, а потом уже удалять ненужные ячейки.
Создадим таблицу из 5 строк и 6 столбцов. В ячейках запишем номер строки.номер ячейки. Используйте аббревиатуру Emmet, а затем слегка подкорректируйте ее:
|
1 |
tr*5>td*6>{$.$} |
Получим такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<table> <caption>Начальная таблица</caption> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td>1.6</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> <td>2.6</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> <td>3.6</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td>4.4</td> <td>4.5</td> <td>4.6</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> <td>5.4</td> <td>5.5</td> <td>5.6</td> </tr> </table> |
И такую таблицу:
Затем будем добавлять атрибуты rowspan и colspan, чтобы таблица изменилась:
В скобках показаны сокращенно атрибуты и их значения (r - rowspan, c - colspan).
Код таблицы с объединениями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<table> <caption>Таблица с объединенными ячейками</caption> <tr> <td rowspan="2">1.1 (<strong>r="2"</strong>)</td> <td>1.2</td> <td colspan="3">1.3 (<strong>c="3"</strong>)</td> <td rowspan="3">1.4 (<strong>r="3"</strong>)</td> </tr> <tr> <td>2.1</td> <td rowspan="2">2.2 (<strong>r="2"</strong>)</td> <td>2.3</td> <td>2.4</td> </tr> <tr> <td colspan="2">3.1 (<strong>c="2"</strong>)</td> <td>3.2</td> <td>3.3</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="3">4.4 (<strong>c="3"</strong>)</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> <td>5.4</td> <td>5.5</td> <td>5.6</td> </tr> </table> |
Для того чтобы иметь возможность отформатировать группы строк или столбцов, можно использовать дополнительные теги: <thead>, <tfoot>, <tbody>, а также <col> и <colgroup>, но о них читайте уже в следующей статье.
Спасибо, все понятно, только стили забыл указать.
Спасибо! Пригодилось совсем недавно.
Спасибо. Все понятно написано.