Хорошо, когда количество горизонтальных ячеек в каждой строке таблицы html одинаково, и располагаются они друг под другом, образуя ровные колонки.
Хорошо, когда количество вертикальных ячеек в каждой колонке таблицы html одинаково, и располагаются они друг за другом, образуя ровные строки. Но как быть, если есть необходимость объединить несколько горизонтальных ячеек в одну?
И что делать, чтобы объединить в одну несколько вертикальных ячеек?
В языке разметки HTML есть специальные атрибуты colspan и rowspan.
Colspan задает число колонок, которые охватывает данная горизонтальная ячейка.
Rowspan задает число строк, которые охватывает данная вертикальная ячейка.
Атрибуты colspan и rowspan используются внутри тегов
Создадим таблицу из двух колонок и трех строк:
посмотреть результат
Две ячейки первой строки объединим по горизонтали в одну, равную по ширине двум колонкам второй и третьей строки. Для этого в задании первой строки при описании левой ячейки используем атрибут colspan=”2”, а описание правой ячейки убираем:
посмотреть результат
Вернем таблицу в исходное состояние. Объединим в одну по вертикали три ячейки первой колонки. Теперь в задании первой строки при описании левой ячейки используем атрибут rowspan=”3”, а в задании второй и третьей строки убираем описания левых ячеек:
посмотреть результат
Чтобы лучше усвоить прочитанный материал разберём пример таблицы, где будут применяться оба атрибута colspan и rowspan:
посмотреть результат