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

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

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

Пример 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">&nbsp;</td>
<td colspan="2" width="34%">&nbsp;</td>
</tr>
<tr>
<td width="50%" colspan="3">&nbsp;</td>
<td bgcolor="#cccccc" colspan="3" width="50%">&nbsp;</td>
</tr>
</table>

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

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="66%" bgcolor="#cccccc">&nbsp;</td>
<td width="34%">&nbsp;</td>
</tr>
</table>
<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">
<td width="50%">&nbsp;</td>
<td bgcolor="#cccccc" width="50%">&nbsp;</td>
</tr>
</table>

Идеал (то есть необходимое форматирование):

<table border="1" bordercolor="#cccccc" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="16%" bgcolor="#999999">&nbsp;</td>
<td width="17%" bgcolor="#999999">&nbsp;</td>
<td width="17%" bgcolor="#999999">&nbsp;</td>
<td width="16%" bgcolor="#999999">&nbsp;</td>
<td width="17%">&nbsp;</td>
<td width="17%">&nbsp;</td>
</tr>
<tr>
<td width="16%">&nbsp;</td>
<td width="17%">&nbsp;</td>
<td width="17%">&nbsp;</td>
<td width="16%" bgcolor="#999999">&nbsp;</td>
<td width="17%" bgcolor="#999999">&nbsp;</td>
<td width="17%" bgcolor="#999999">&nbsp;</td>
</tr>
</table>

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

Источник: http://rsw.mastak.com