Атрибут HTML colspan
Атрибут HTML colspan задаёт, на сколько столбцов должна растягиваться ячейка таблицы. Узнайте, на каких элементах можно использовать colspan.
Атрибут HTML colspan позволяет одной ячейке таблицы растянуться на два и более столбца. Это разметочный эквивалент «объединения ячеек» в электронных таблицах: вместо одной ячейки на столбец в строке вы задаёте ячейке colspan, и она занимает горизонтальное пространство нескольких столбцов. Именно так создаются итоговые строки, сгруппированные заголовки и любые макеты, где один фрагмент контента относится к нескольким столбцам.
На этой странице описаны допустимые значения colspan, поддерживающие его элементы, совместное использование с rowspan для одновременного охвата столбцов и строк, требования доступности для ячеек-заголовков и современный CSS, заменяющий устаревший атрибут border="1".
Какие элементы поддерживают colspan
colspan можно использовать только на двух элементах ячеек таблицы:
<td>— стандартная ячейка данных.colspanзадаёт, сколько слотов столбцов она занимает.<th>— ячейка-заголовок.colspanзадаёт, на сколько столбцов распространяется заголовок.
Атрибут не является допустимым для <table>, <tr>, <col> и любых других элементов. Для управления целыми столбцами из одного места используйте <col>/<colgroup>, однако само поведение объединения ячеек всегда определяется на <td> или <th>.
Правила значений
Значение colspan — это положительное целое число (1, 2, 3, …):
colspan="1"— значение по умолчанию: обычная ячейка, занимающая один столбец. Явно указывать его почти никогда не нужно.- Любое значение больше
1заставляет ячейку занимать соответствующее количество столбцов. Ячейка «поглощает» слоты из соседних ячеек той же строки, поэтому каждое увеличениеcolspanуменьшает количество ячеек-братьев в строке. - Стандарт HTML ограничивает значение числом 1000; большие числа усекаются до этого предела.
- Значение
colspan="0"— устаревшая идея HTML4, означавшая «охватить все оставшиеся столбцы». Оно не является частью живого стандарта HTML и не поддерживается надёжно во всех браузерах, поэтому не используйте его — задавайте явное положительное целое число.
Если указанное значение colspan превышает количество столбцов, доступных в строке, браузер просто растянет ячейку до края таблицы, не создавая дополнительных столбцов.
Синтаксис
<td colspan="value"> ... </td>
<th colspan="value"> ... </th>Пример использования атрибута HTML colspan на элементе <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>В последней строке только один элемент <td>, а не два, потому что colspan="2" заставляет эту единственную ячейку заполнять оба столбца — «Month» и «Salary». Если убрать colspan, в строке не хватит ячейки и макет таблицы нарушится.
Пример использования атрибута HTML colspan на элементе <th>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Совместное использование colspan и rowspan
colspan охватывает столбцы (горизонтально); его аналог rowspan охватывает строки (вертикально). Эти атрибуты почти всегда изучаются вместе, поскольку реальные таблицы нуждаются в обоих: например, заголовок, обозначающий несколько столбцов над подзаголовками, или ячейка-метка, охватывающая несколько строк сбоку.
Оба атрибута можно задать одной ячейке одновременно, чтобы она занимала прямоугольный блок столбцов и строк. Как и при использовании только colspan, каждая ячейка, «перекрытая» другой ячейкой, должна быть удалена из разметки той строки, в которой она в противном случае появилась бы, — иначе в строке окажется слишком много ячеек.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td>Anna</td>
<td>555-0101</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>Здесь rowspan="2" позволяет заголовку «Name» распространяться на вторую строку заголовков, а colspan="2" располагает заголовок «Contact» над «Phone» и «Email». Подробнее о построении подобных структур читайте на странице HTML Tables.
Стилизация границ таблицы с помощью CSS
Атрибут border="1", использованный в примерах выше, — это устаревший способ отображения границ ячеек. В современном HTML он устарел — вместо него используйте CSS. Ключевое свойство — border-collapse: collapse, которое объединяет двойные границы ячеек в единые общие линии:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #666;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
</table>
</body>
</html>Это даёт полный контроль над цветом, шириной и отступами границ, что невозможно с атрибутом border.
Доступность для объединённых ячеек-заголовков
Когда <th> охватывает несколько столбцов, программам чтения с экрана необходима подсказка о том, какие ячейки данных он описывает. Добавьте одно из следующего:
- Атрибут
scopeдля заголовка —scope="colgroup"для заголовка, охватывающего несколько столбцов, илиscope="col"для одного столбца. Это наиболее простой вариант для несложных таблиц. - Для сложных таблиц присвойте каждому заголовку
idи укажите эти идентификаторы в соответствующих ячейках данных с помощью атрибутаheaders(headers="h1 h2").
Например, заголовок группы столбцов следует разметить как <th colspan="2" scope="colgroup">Contact</th>, чтобы вспомогательные технологии связали его с обоими охватываемыми столбцами.