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

Опубликовано: 14 мая 2011   ( с изм. от 25 октября 2019 )
Раздел(ы): HTML & CSS
Просмотры: 949
Комментарии: 0

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

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

Пример 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>

Вывод

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

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

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

© Юрий Рассадников, 2011 - 2021
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 9 | 0,120 сек. | 10.59 МБ