Colspan

Таблица в HTML — это прямоугольная сетка, и каждая строка по умолчанию состоит из одинакового числа ячеек. Иногда сетку нужно нарушить: подписать несколько колонок одним заголовком, вывести итог на всю ширину, вставить разделитель «Дополнительные услуги» посреди прайса. Для этого ячейке говорят, сколько столбцов она занимает. Значение по умолчанию — 1.

Пример разметки

<table>
  <tr>
    <th rowspan="2">Модель</th>
    <th colspan="3">Габариты, см</th>
  </tr>
  <tr>
    <th>Ширина</th><th>Высота</th><th>Глубина</th>
  </tr>
  <tr>
    <td>Шкаф-купе</td><td>180</td><td>240</td><td>60</td>
  </tr>
</table>

Заголовок «Габариты» занимает три столбца, под ним три уточняющих заголовка. Ячейка «Модель» с атрибутом rowspan растянута по вертикали на две строки, поэтому во второй строке её нет.

Как считать ячейки

Главная ошибка — несовпадение суммы. В каждой строке сумма значений colspan всех ячеек плюс места, занятые растянутыми сверху ячейками, должна быть одинаковой. Если в одной строке получилось четыре столбца, а в другой пять, браузер не выдаст ошибку, а просто сдвинет ячейки: цифры окажутся не под своими заголовками. Проверить удобно в инструментах разработчика, подсветив ячейку, или валидатором разметки.

Для доступности в многоуровневых таблицах заголовки связывают с ячейками явно: заголовкам дают id, а ячейкам — атрибут headers со списком нужных id. Группы колонок можно описать элементами colgroup и пометить общий заголовок как scope="colgroup". Тогда экранный диктор сможет назвать у ячейки оба заголовка, «Габариты» и «Высота», а не просто прочитать число.

Аналог в CSS Grid

Colspan относится к табличным данным. Если нужно растянуть блок на несколько колонок в макете страницы, таблица не нужна: в CSS Grid то же делает свойство grid-column: span 3. Правило простое: прайс, характеристики, расписание — таблица с colspan; карточки, баннеры и колонки сайта — сетка в CSS. Подробнее про устройство самих ячеек — в статье «Ячейка таблицы».