Таблица как средство форматирования гипертекста

Не буду говорить о необходимости таблиц. Можно бесконечно дискусировать о их «полезности» и альтернативах.
Просто посмотрите код популярных «буржуйских» серверов, и все сразу поймете… У них все в таблицах.

Поэтому и мы начинаем приручать таблицы для форматирования текста. Однако с усложнением дизайна выясняется, что одной таблицы недостаточно.

Пример 1

Класический вариант «2/3».

Здесь все просто, ведь в каждой строке, соотношение «2/3».
Просто создаем по три ячейки в строке и объединям две слева в первой строке и две справа во второй.

Решение

Пример 2

Посложнее, «2/3» и «1/2».

Теперь в каждой строке необходимо создать 6 ячеек, объеденив 4 слева в первой строке и 3 справа во второй.

Решение

Как видите таблица усложнилась, и если соотношения будут еще более различными, то вы просто не уложитесь в максимальные 25 столбцов отведенных стандартом для таблиц.
К примеру «1/6» и «2/5» требуют 30 ячеек в строке.

Кроме того, заметен «разъезд» ширины ячеек.
Сравните пример и решение.
Либо первые строки таблицы примеров 1 и 2.

Кто виноват, выяснять бесполезно, в IE «разъезд» очевиден, а этот браузер используется большинством пользователей интернета.

Обойти эти ньюансы помог анализ опять же «буржуйских» сайтов.
Форматирование каждой страницы у них производится не одной, а несколькими подряд идущими таблицами.
Решение второго примера при этом выглядит так:

Одной таблицей

Двумя таблицами

Идеал

Необходимое форматирование

Как видите применение двух таблиц позволят точно попасть «в сетку», то есть ширина ячеек не разъезжается от объединения. Кроме того количество ячеек в строке не увеличивается сверх необходимого.

Вот так выглядят исходники на HTML (скопируйте их себе и убедитесь в справедливости всего вышеизложенного):

Одной таблицей

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td width="66%" bgcolor="#cccccc" colspan="4"> </td>

<td colspan="2" width="34%"> </td>

</tr>

<tr>

<td width="50%" colspan="3"> </td>

<td bgcolor="#cccccc" colspan="3" width="50%"> </td>

</tr>

</table></font>

Двумя таблицами

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td width="66%" bgcolor="#cccccc"> </td>

<td width="34%"> </td>

</tr>

</table>

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">

<td width="50%"> </td>

<td bgcolor="#cccccc" width="50%"> </td>

</tr>

</table>

Идеал

Необходимое форматирование:

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td width="16%" bgcolor="#999999"> </td>

<td width="17%" bgcolor="#999999"> </td>

<td width="17%" bgcolor="#999999"> </td>

<td width="16%" bgcolor="#999999"> </td>

<td width="17%"> </td>

<td width="17%"> </td>

</tr>

<tr>

<td width="16%"> </td>

<td width="17%"> </td>

<td width="17%"> </td>

<td width="16%" bgcolor="#999999"> </td>

<td width="17%" bgcolor="#999999"> </td>

<td width="17%" bgcolor="#999999"> </td>

</tr>

</table>

Вывод

Если ширина ячеек и их количество меняются от строки к строке, а упрощать форматирование нежелательно, то правильнее, а зачастую и проще, разбить таблицу на несколько таблиц. Нежели пытаться объединением ячеек добиваться желаемого результата.