В одном из прошлых уроков мы собрали несколько таблиц. Возьмем самую сложную из них:

Для начала, пересоберите таблицу так, чтобы правая часть состояла из трех таблиц внутри содержащего их <td>. То есть на левый элемент мы не ставим rowspan. А в правой части мы избавляемся от всех colspan-ов.

Выходит, что у нас  общая таблица, слева просто <td>, справа <td>…</td> внутри которого ТАБЛИЦА. Эта таблица делится на ТРИ ROW (ряда). Первый ряд — таблица на 2 колонки, второй ряд — таблица на 1 колонку, и третий ряд — таблица на 2 колонки.

Разберем по полочкам. Красная коробка — самая общая таблица, которая содержит все. Представим, что это такой комод с ящиками. Он делится на 2 <td> — на две коробки зеленого цвета:

В коде красная таблица на 2 ячейки выглядит так:

Теперь посмотрим в правую зеленую ячейку. Там лежит еще одна таблица на три ряда — визуально — три ящика синего цвета один под другим — значит, используем <tr>. Теперь просто пишем таблицу на три <tr>, и вставляем эту таблицу в правую зеленую ячейку.

Итак — синяя таблица на три ряда:

Теперь она же внутри красной таблицы, в зеленом правом ящике:

Теперь опять поглядим на картинку. Осталось запихнуть в синий «ящик первый» и «ящик третий» еще по одной таблице на 2 ячейки. Эти таблицы такие же как общая красная. Получаем наш окончательный вариант:

Вуаля. Попробуйте теперь таким же способом пересобрать свои старые таблицы из прошлого урока.

После того, как вы научитесь разбивать большую таблицу на множество маленьких, переходим к верстке того же самого div-ами.

У нас будет один общий div, который делится на 2.

Каждый див внутри главного должен иметь float: left; чтобы правый прибился к левому, и они встали в 1 ряд. Без этого свойства дивы встанут один под другим (это свойство дивов по умолчанию).

Далее — по схожей с таблицами схеме в правом диве у нас будет три дива один под другим (как ряды в ячейке справа). Верхний будет содержать 2 дива с float: left, средний — 1 див, нижний — опять 2 дива с float: left.

В css пропишите высоту каждого дива, чтобы мы получили на выходе такой же вид, как и таблица.