Тег TD, атрибут colspan

Атрибут colspan

Атрибут colspan управляет объединением столбцов HTML таблицы. Применяется к тегам th и td .

Принимаемое значение: целое число начиная с 1 .

Как пользоваться: добавляем данный атрибут к любой ячейке td или th . Если, к примеру, задать colspan в значение 2 — то ячейка, которой это задали, займет два столбца таблицы. При этом соседние ячейки справа никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек справа. Смотрите примеры для лучшего понимания.

Пример . Таблица без объединений

Давайте посмотрим на таблицу без объединений, с которой мы будем работать дальше:

Пример . Расширим Ячейку1 на два столбца

Давайте попробуем расширить Ячейку1 на два столбца, задав ей атрибут colspan в значении 2 . При этом она вытеснит ячейки справа и таблица развалится:

Пример . Расширим Ячейку1 на два столбца без разваливания таблицы

А теперь попробуем поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 — без разницы):

Пример . Расширим Ячейку1 на 3 столбца без разваливания таблицы

Давайте расширим Ячейку1 на 3 столбца и зададим ей атрибут colspan в значении 3 . При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

Пример . Одновременно colspan и rowspan

Давайте попробуем объединить ячейки с номером 4 , 5 , 7 и 8 , воспользовавшись атрибутами colspan и rowspan (предыдущие объединения уберем из таблицы):

Смотрите также

Источник

Атрибут colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью атрибута colspan .

Синтаксис

Значения

Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединенную тегом . Значения выше 1000 считаются неправильными и устанавливаются в 1.

Значение по умолчанию

       
 
Ячейка 1
 
 
Ячейка 2
 
Ячейка 3
 
 
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Атрибут colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью атрибута colspan .

Синтаксис

Значения

Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединенную тегом . Значения выше 1000 считаются неправильными и устанавливаются в 1.

Значение по умолчанию

       
 
Ячейка 1
 
 
Ячейка 2
 
Ячейка 3
 
 
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

HTML colspan Attribute

The colspan attribute defines the number of columns a table cell should span.

Applies to

The colspan attribute can be used on the following elements:

Examples

Td Example

An HTML table with a table cell that spans two columns:

Th Example

An HTML table with a header cell that spans two columns:

Browser Support

The colspan attribute has the following browser support for each element:

Element
td	Yes	Yes	Yes	Yes	Yes
th	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник