Содержание

Атрибут colspan — группировка колонок

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

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

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

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

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

<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>
table, td, th { border: 1px solid black; }

:

Пример .

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

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

<table> <tr> <td colspan="2">Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>
table, td, th { border: 1px solid black; }

:

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

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

<table> <tr> <td colspan="2">Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>
table, td, th { border: 1px solid black; }

:

Пример .

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

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

<table> <tr> <td colspan="3">Ячейка 1</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>
table, td, th { border: 1px solid black; }

:

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

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

<table> <tr> <td colspan="3">Ячейка 1</td> </tr> <tr> <td colspan="2" rowspan="2">Ячейка 4</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 9</td> </tr> </table>
table, td, th { border: 1px solid black; }

:

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

  • атрибут rowspan,
    который объединяет ряды таблицы

HTML/Атрибут colspan (Элемент th)

/html/th/colspan:> Объединение ячеек_

Синтаксис

(X)HTML

<th colspan="[значение]"> .
 
 .. </th>

Описание

Атрибут / параметр colspan (от англ. «columns span» ‒ «охват столбцов») указывает количество столбцов, охватываемых (занимаемых) данной ячейкой шапки таблицы.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0
—
3.2Tables
4.0111.2.6 Table cells: The TH and TD elements
colspan = number [CN]…
DTD: Transitional Strict Frameset
5. 04.9.11 Attributes common to td and th elements
a colspan content…
5.14.9.11. Attributes common to td and th elements
a colspan content…
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

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

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

«1».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр colspan (Элемент th)</title>
</head>
<body>
<h2>Пример использования атрибута «colspan»</h2>
<table border=»1″>
<colgroup> <col span=»3″> </colgroup>
<thead>
<tr> <th colspan=»3″>Столбцы</th> </tr>
</thead>
<tbody>
<tr> <td>1</td> <td>2</td> <td>3</td> </tr>
</tbody>
</table>
</body>
</html>

Параметр colspan (Элемент th)

Атрибут HTML colspan

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

Атрибут colspan определяет количество столбцов, которые должна охватывать ячейка таблицы.

Относится к

Атрибут colspan можно использовать для следующих элементов:

Элементы Атрибут
<тд> колспэн
<й> колспэн

Примеры

Td Пример

HTML-таблица с ячейкой, занимающей два столбца:


 
   
   
 
 
   
   
 
 
    900 46    
 
 
   
 
Month Сбережения
Январь 100 долларов США
Февраль100 долларов США
Сумма: $180

Попробуйте сами »

Пример

An Таблица HTML с ячейкой заголовка, которая охватывает два столбца:













Ежемесячная экономия
Январь 100 долларов
Февраль $80

Попробуйте сами »

Поддержка браузера

Атрибут colspan имеет следующую поддержку браузера для каждого элемента:

Элемент 900 21
тд Да Да Да Да Да
-й Да Да Да Да Да

❮ Предыдущий Все атрибуты HTML Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 34 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

900 04

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Что такое colspan в HTML?

Маркель Эллис

Обновлено:

Опубликовано:

Таблицы необходимы для систематизации информации и веб-страниц. Однако не для каждой строки вашей таблицы потребуется одинаковое количество ячеек. Вот где атрибут colspan в HTML вступает в игру.

Заголовок вашей таблицы или разных строк, возможно, должен охватывать несколько столбцов. Атрибут colspan позволяет вашей строке охватывать несколько столбцов. Это похоже на функцию «объединить ячейки» в Excel.

Одним из основных ключей к успешному программированию является умение эффективно использовать HTML. Сегодня мы поговорим о colspan, важном атрибуте, который поможет вам создавать более качественные и красивые таблицы.

Содержание

  • Что такое colspan в HTML?
  • Как использовать Colspan в HTML
  • Colspan в действии

Что такое colspan в HTML?

Colspan — это атрибут HTML, который позволяет растянуть строку или столбец на несколько ячеек. Это означает, что вместо нескольких столбцов ячейки будут объединены, а содержимое будет охватывать несколько столбцов.

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

Это содержимое занимает два столбца

Вот пример формы с использованием атрибута colspan. В этом случае первая и последняя строки охватывают оба столбца.

Как использовать Colspan в HTML

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

Допустим, у вас есть таблица с двумя строками и пятью столбцами. Если вы хотите, чтобы первая строка охватывала все пять столбцов, синтаксис будет выглядеть так:

Это содержимое занимает пять столбцов

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

См. ниже пошаговое руководство.

1. Создайте таблицу с помощью HTML.

Прежде чем использовать  атрибут colspan, вам необходимо создать таблицу с использованием элементов

, и <тд> <тд> <тд> <тд> <тд> <тд> <тд> <тд> <тд>
.

Нужна переподготовка? Погрузитесь в работу с HTML-таблицами.

<таблица>

2. Добавьте атрибут colspan.

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

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

<таблица>Это содержимое занимает три столбца

3. Добавьте содержимое в строку таблицы.

После того, как вы определили, какая строка будет охватывать несколько столбцов, пришло время ввести текст. Для этого поместите свой контент между открытым и закрытым тегом.

<таблица>Здесь находится мой контент

Повторите процесс для любых других строк, которые вы хотите охватить несколькими столбцами.

Вот как вы используете colspan в HTML. Использование этого атрибута может значительно упростить создание сложных таблиц с несколькими строками и столбцами.

Существует множество различных сценариев использования colspan. Вот некоторые примеры:

  • Отображение нескольких столбцов данных в одной строке.
  • Отображение строки заголовка в нескольких столбцах.
  • Создание таблиц с переменной шириной столбцов.
  • Объединение двух и более ячеек в одну.

Colspan в действии

Давайте посмотрим, как работает colspan в действии. Вот простая таблица, которую мы будем использовать, чтобы проиллюстрировать, как работает colspan.

<блок кода> <таблица> <tr> <td colspan=»3″>Здесь находится мой контент</td> </tr> </таблица>

Результатом этого кода будет таблица с двумя строками и четырьмя столбцами. Ячейка 3 охватывает два столбца, а ячейка 4 — три столбца.

Вот как colspan может помочь быстро создавать сложные таблицы всего несколькими строками кода.

Использование colspan в вашем HTML.

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

Темы: HTML

Не забудьте поделиться этим постом!

Связанные статьи

  • Как использовать элемент Section в HTML

    19 июля 2023 г.

  • hubspot.com/website/html-slider»>

    Как создать ползунок диапазона в HTML + CSS

    11 июля 2023 г.

  • Как создать символ авторского права в HTML

    07 июня 2023 г.

  • Как использовать тег HTML-скрипт

    31 мая 2023 г.

  • Как создавать вкладки с помощью HTML

    29 мая 2023 г.

  • Ищете CKEditor? Попробуйте эти 10 альтернатив

    22 мая 2023 г.

  • hubspot.com/website/html-jquery»>

    Как использовать метод jQuery html()

    18 мая 2023 г.

  • Как добавить и изменить цвет фона в HTML

    18 мая 2023 г.

  • Как создать раскрывающееся меню в формате HTML [+ примеры]

    17 мая 2023 г.

    No related posts.