Атрибут colspan
Атрибут colspan управляет объединением столбцов HTML таблицы. Применяется к тегам th и td .
Принимаемое значение: целое число начиная с 1 .
Как пользоваться: добавляем данный атрибут к любой ячейке td или th . Если, к примеру, задать colspan в значение 2 — то ячейка, которой это задали, займет два столбца таблицы. При этом соседние ячейки справа никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек справа. Смотрите примеры для лучшего понимания.
Пример . Таблица без объединений
Давайте посмотрим на таблицу без объединений, с которой мы будем работать дальше:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на два столбца
Давайте попробуем расширить Ячейку1 на два столбца, задав ей атрибут colspan в значении 2 . При этом она вытеснит ячейки справа и таблица развалится:
| Ячейка 1 | Ячейка 2 | Ячейка 3 | |
| Ячейка 4 | Ячейка 5 | Ячейка 6 | |
| Ячейка 7 | Ячейка 8 | Ячейка 9 | |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на два столбца без разваливания таблицы
А теперь попробуем поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 — без разницы):
| Ячейка 1 | Ячейка 2 | |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на 3 столбца без разваливания таблицы
Давайте расширим Ячейку1 на 3 столбца и зададим ей атрибут colspan в значении 3 . При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:
| Ячейка 1 | ||
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Одновременно colspan и rowspan
Давайте попробуем объединить ячейки с номером 4 , 5 , 7 и 8 , воспользовавшись атрибутами colspan и rowspan (предыдущие объединения уберем из таблицы):
| Ячейка 1 | ||
| Ячейка 4 | Ячейка 6 | |
| Ячейка 9 | ||
table, td, th < border: 1px solid black; >
Смотрите также
- атрибут rowspan ,
который объединяет ряды таблицы
Атрибут colspan HTML тега td
Атрибут colspan определяет количество ячеек по горизонтали, которые должны быть объединены.
Только браузер Firefox поддерживает значение colspan=»0″, имеющее специальное значение.
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| число | Число ячеек, которые следует объединить. Значение 0 указывает на то, что ячейка должна распространиться на всю родительскую группу, объединенную тегом |
Пример использования атрибута
HTML таблица с ячейкой, которая объединяет две ячейки:
Месяц Сумма Январь $100 Февраль $100 Итого: $180
html атрибут colspan
Атрибут colspan визначає об’єднання стовпців у один рядок.
Значення атрибута вказує на те, скільки стовпчиків буде об’єднано.
colspan=»0″ вказує браузеру, що об’єднати треба групу стовпчиків.
Синтаксис
Атрибут colspan може отримувати єдине значення :
Задає число стовпців, яке осередок даних повинно охоплювати. Значення атрибута повинно бути невід’ємним цілим числом. Не рекомендується використовувати значення понад 1000, тому що вони можуть бути обрізані до цього числа. Значення за замовчуванням 1.
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
Объединение ячеек таблицы.
В этом уроке продолжаем изучать таблицы, а именно мы рассмотрим еще два атрибута для тега <td>, которые отвечают за объединение ячеек. Посмотрев на рисунок ниже, Вы поймете о каком объединении пойдет речь.
Таблица изображенная слева, имеет обычную структуру. У правой таблицы в первой строке две ячейки объединены между собой, образуя одну большую ячейку.
Применение этих атрибутов немного сложнее, чем применение других. Именно по этому им отведен отдельный урок.
Атрибут colspan.
Атрибут colspan используется для объединения ячеек по горизонтали. В значении атрибута указывается число ячеек объединяемых в одну.
Внимание! Очень важно, чтобы общее количество объединенных и обычных ячеек одной строки было равно общему количеству ячеек другой строки. Рассмотрим в качестве примера правую таблицу первого рисунка. Верхняя строка содержит в себе только одну большую ячейку состоящую из двух обычных, а нижняя строка содержит в себе две обычных ячейки.
Ниже представлен вариант правильно написанного кода:
Пояснения к коду:
Верхняя строка <tr> имеет одну ячейку <td>, для которой прописан атрибут colspan со значением 2. Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка <tr> имеет 2 обычные ячейки <td>.
Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно.
Теперь пример кода с распространенной ошибкой:
Пояснения к коду:
Ошибка в том, что первая строка <tr> содержит не две ячейки <td>, а три, в то время как вторая строка <tr> содержит две ячейки <td>.
Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов <td> одинаковое. Но один из тегов <td> имеет атрибут colspan со значением 2, это значит, что эта одна ячейка занимает место двух.
Атрибут rowspan.
Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan.
Пояснения к коду:
Верхняя строка <tr> имеет три ячейки <td>, для одной из них прописан атрибут rowspan со значением 3. Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки <tr> имеют лишь по две ячейки <td>, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.
Понимаю, тема объединения ячеек для многих может показаться запутанной. Чтобы хорошо усвоить данный материал, необходимо попрактиковаться. Создайте несколько не сложных таблиц и примените к ним атрибуты colspan и rowspan самостоятельно.
Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru