Растягивание ячеек в таблицах html

Для наглядности в страницы сайта часто вставляются различные таблицы.
Хорошо, когда количество горизонтальных ячеек в каждой строке таблицы html одинаково, и располагаются они друг под другом, образуя ровные колонки.
Хорошо, когда количество вертикальных ячеек в каждой колонке таблицы html одинаково, и располагаются они друг за другом, образуя ровные строки. Но как быть, если есть необходимость объединить несколько горизонтальных ячеек в одну?

И что делать, чтобы объединить в одну несколько вертикальных ячеек?

В языке разметки HTML есть специальные атрибуты colspan и rowspan.
Colspan задает число колонок, которые охватывает данная горизонтальная ячейка.
Rowspan задает число строк, которые охватывает данная вертикальная ячейка.
Атрибуты colspan и rowspan используются внутри тегов

Создадим таблицу из двух колонок и трех строк:

посмотреть результат

Две ячейки первой строки объединим по горизонтали в одну, равную по ширине двум колонкам второй и третьей строки. Для этого в задании первой строки при описании левой ячейки используем атрибут colspan=”2”, а описание правой ячейки убираем:

посмотреть результат

Вернем таблицу в исходное состояние. Объединим в одну по вертикали три ячейки первой колонки. Теперь в задании первой строки при описании левой ячейки используем атрибут rowspan=”3”, а в задании второй и третьей строки убираем описания левых ячеек:

посмотреть результат

Чтобы лучше усвоить прочитанный материал разберём пример таблицы, где будут применяться оба атрибута colspan и rowspan:

посмотреть результат