Самый быстрый способ продвинуть сайт, получи индивидуальное предложение и подарок!

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

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

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

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

Пример 1

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

   
   

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

Решение

     
     

Пример 2

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

   
   

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

Решение

           
           

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

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

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

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

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

   
   

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

   
   

Идеал

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

           
           
Рекомендую прочесть:  Как ускорить сайт на 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></font>

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

<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>

Вывод

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

Поделись этой страницей с друзьями!

Прочтите это обязательно

Не удается запустить Windows из-за аппаратных ошибок настройки диска

Причин по которым операционная система Виндовс (Windows) не загружается может быть много. Как минимум три: апп ...

Windows disk windows Далее

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

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

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

2018 © Технический блог
SQL - 85 | 0,214 сек. | 8.43 МБ
доступность сайта