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

 14 мая 2011      
 HTML & CSS      
 Комментариев еще нет      
 1

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

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

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

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

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

   
   

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

Решение

     
     

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

   
   

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

Решение

           
           

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

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

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

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

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

   
   

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

   
   

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

           
           
Читайте также:  Время генерации страницы, количество SQL запросов и объем памяти Wordpress

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

Вот так выглядят исходники на 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>

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" я даю свое согласие на обработку введенной мной персональной информации в соответствии с Федеральным Законом от 27.07.2006 №152-ФЗ "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

Технический блог © 2017
SQL - 58 | 0,244 сек. | 10.17 МБ
Политика конфиденциальности