Автоматическая компоновка

Модель автоматической компоновки не так быстра, как фиксированная, но, вероятно, намного лучше знакома вам, потому что, по существу, аналогична модели, давно используемой HTML-таблицами. В большинстве современных агентов пользователя применение этой модели будет инициировано таблицей, свойство width которой имеет значение auto, независимо от значения table-layout, хотя это не гарантируется. Причина, по которой процесс автоматической компоновки медленнее, в том, что таблица не может планироваться до тех пор, пока агент пользователя не просмотрит все ее содержимое. То есть при автоматической компоновке агент пользователя должен при каждом добавлении новой ячейки строить таблицу заново.

При этом обычно агент пользователя выполняет некоторые вычисления, а затем вновь тщательно анализирует таблицу, чтобы выполнить вычисления второй очереди. Содержимое всех ячеек должно быть полностью обследовано, потому что, как и с таблицами HTML, компоновка таблицы зависит от него. Если в ячейке последней строки находится изображение шириной 400 пикселов, оно сделает ширину всех ячеек над ним (находящихся в этой же колонке) равной 400 пикселам. Таким образом, ширина каждой ячейки должна быть вычислена, и перед тем, как таблица сможет быть скомпонована, должны быть сделаны некоторые корректировки (возможно, это приведет к запуску второго круга вычислений ширины содержимого).


Работа модели может быть описана следующими этапами:

1. Для каждой ячейки столбца вычисляются минимальное и максимальное значения ширины ячейки.

a. Определяется минимальная ширина, необходимая для представления содержимого. Помните, что содержимое может занимать различное число строк, но не может выходить за границы блока ячейки. Если значение свойства width ячейки больше, чем минимально возможная ширина, то оно принимается за минимальную ширину ячейки. Если ширина ячейки задана как auto, то минимальная ширина ячейки приравнивается к минимальной ширине содержимого.

b. Для максимальной ширины определяется ширина, необходимая для представления содержимого без введения других, кроме заданных явно (например, элементом (br)), разрывов строки. Это значение и есть максимальная ширина ячейки.

2. Для каждого столбца вычисляются и минимальная, и максимальная ширина.

a. Минимальная ширина столбца определяется по самой большой минимальной ширине ячейки этого столбца. Если для столбца явно задано значение width, большее, чем любая из минимальных ширин ячеек этого столбца, то это значение width становится минимальной шириной столбца.

b.


Для определения максимальной ширины берется максимальная ширина ячейки всех ячеек столбца. Если столбцу явно задано значение width, большее, чем любая из максимальных ширин ячеек этого столбца, то это значение width становится максимальной шириной столбца. Эти две модели поведения воссоздают традиционное поведение HTML-таблицы, принудительно расширяя любой столбец до размера его самой широкой ячейки.

3. В случаях, когда ячейка охватывает более одного столбца, сумма минимальных ширин столбцов должна быть равна минимальной ширине объединенной ячейки. Аналогично сумма максимальных ширин столбцов должна быть равна максимальной ширине объединенной ячейки. Агенты пользователя при любых изменениях ширин столбцов должны поровну распределять их величины между объединенными столбцами. Кроме того, агент пользователя должен учитывать, что когда ширина столбца задана процентным значением, оно вычисляется относительно ширины таблицы, даже если он еще не знает, какой она будет! Он должен сохранить процентное значение и использовать его в следующей части алгоритма. На данный момент агент пользователя уже определит, насколько широким или узким может быть каждый из столбцов. Имея в распоряжении эту информацию, он может найти действительное значение ширины таблицы.


Это происходит следующим образом:

1. Если вычисляемая ширина таблицы не равна auto, она сравнивается с суммой ширин всех столбцов и рамок и промежутков между ячейками. (Ширина столбцов, заданная процентными значениями, скорее всего, вычисляется в этот момент.) Большее из этих двух значений и является окончательной шириной таблицы. Если вычисленная ширина таблицы больше суммы ширин столбцов, рамок и промежутков между ячейками, тогда ширина всех столбцов увеличивается на равные величины до тех пор, пока они не займут всю таблицу.

2. Если вычисляемая ширина таблицы равна auto, окончательная ее ширина определяется путем суммирования ширин столбцов, рамок и промежутков между ячейками. Это означает, что ширина таблицы будет именно такой, какая необходима для отображения ее содержимого, – точно так же, как и в обычных HTML-таблицах. Для всех столбцов, ширина которых задана процентным значением, он выступает в качестве ограничения, но такого, которое агент пользователь не обязан удовлетворять.

И только после завершения последнего этапа агент пользователя действительно может построить таблицу. Следующие стили и разметка помогают проиллюстрировать этот процесс:

table {table-layout: auto; width: auto;
border-collapse: collapse;}
td {border: 1px solid;}
col#c3 {width: 25%;}
#r1c2 {width: 40%;}
#r2c2 {width: 50px;}
#r2c3 {width: 35px;}
#r4c1 {width: 100px;}
#r4c4 {width: 1px;}







1-11-2 1-31-4
2-12-2 2-32-4
3-13-2 3-33-4
4-14-2 4-34-4


Рассмотрим последовательно, что происходит с каждым из столбцов:
• В первом столбце ширина явно задана только для ячейки 4–1 – width: 100px;. Поскольку ее содержимое достаточно мало, 100px становится и минимальной, и максимальной шириной столбца. (Если бы в столбце была ячейка, содержащая несколько предложений текста, максимальная ширина столбца была бы увеличена до любого значения, необходимого для представления всего текста без разрывов строк.)

• Для второго столбца было объявлено две ширины: свойству width ячейки 1–2 было присвоено значение 40%, а для ячейки 2–2 было задано width: 50px;. Минимальная ширина этого столбца равна 50px, а максимальная ширина – 40% окончательной ширины таблицы.

• В третьем столбце только ячейка 3–3 имеет явно заданную ширину (35px), но свойству width самого столбца было задано значение 25%. Следовательно, минимальная ширина столбца составляет 35px, а максимальная ширина – 25% окончательной ширины таблицы.

• В четвертом столбце только для ячейки 4–4 было явно задано значение свойства width (1px). Это меньше, чем минимальная ширина содержимого, поэтому и минимальная, и максимальная ширина столбца приравниваются минимальной ширине содержимого ячеек. После вычисления это значение составило 25 пикселов. Теперь агент пользователя знает, что четыре столбца имеют следующие минимальные и максимальные ширины:

1. min 100px / max 100px
2. min 50px / max 40%
3. min 35px / max 25%
4. min 25px / max 25px

Таким образом, минимальная ширина таблицы – это сумма всех минимумов столбцов плюс рамки, что в сумме дает 215 пикселов. Максимальная ширина таблицы равна 130px + 65 процентов, что составляет 371,42857143 пикселов (исходя из того, что 130px соответствуют 35% общей ширины таблицы). Примем ее после округления дробной части равной 371 пикселу. Именно этим значением ширины будут руководствоваться агенты пользователя. Таким образом, ширина второго столбца будет равна 148 пикселам, а третьего – 93 пикселам. От агентов пользователя не требуется выбирать максимальное значение; они могут предпочесть другой образ действия. Конечно, это был очень простой и незатейливый пример (хотя, возможно, он таким не показался): все содержимое имело практически одну ширину, и большинство значений ширины были заданы в пикселах. В случаях, когда таблица содержит GIF-разделители, абзацы текста, элементы формы и т. д., процесс определения макета таблицы, скорее всего, будет намного более длительным.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота
Значения свойства display для таблиц

Вернуться в раздел: CSS / 11. Верстка таблиц