... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование блоков. Блоковая модель. (стр.8)

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Ускорение обработки таблиц в CSS

При изучении таблиц в HTML описывались два алгоритма их обработки: фиксированный и автоматический. В CSS им соответствуют два значения свойства table-layout.

  • table-layout:auto - автоматический алгоритм обработки (устанавливается по умолчанию). Он довольно медленный, потому что таблица не выводится на экран до тех пор, пока браузер не скачает все ее содержимое — иначе он просто не сможет просчитать параметры таблицы: количество столбцов, их размеры, отступы внутри ячеек и т.п. Особенно это критично, когда таблица или очень длинная, или в ней множество графических объектов. Поэтому и рекомендуется разбивать большие таблицы на несколько отдельных, размером поменьше, чтобы пользователь смог увидеть хотя бы часть Web-страницы, пока ее остальное содержимое загружается.
  • table-layout:fixed - фиксированный алгоритм обработки позволяет быстрее обработать и просчитать содержимое таблицы. Он работает быстрее, потому что не учитывает содержимого отдельных ячеек, а оперирует лишь общими параметрами таблицы: шириной самой таблицы; шириной столбцов, определенной в элементах COL и COLGROUP или элементов TD первой строки таблицы; расстояниями между ячейками и отступами внутри ячеек. Если же данные о ширине ячеек будут недоступны, браузеру придется ждать загрузки содержимого ячеек и согласно ему вычислять размеры таблицы.

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

Задать режим фиксированной обработки можно, например, непосредственно внутри таблицы.

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" STYLE="table-layout:fixed" WIDTH="200"></TABLE>

Давайте рассмотрим простой пример таблицы.

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" STYLE="table-layout: fixed" WIDTH="400">
<COL WIDTH="200"><COL WIDTH="200">
<TR>
<TD>Будьте внимательны, используя символ неразрывного пробела.</TD>
<TD>Будьте&nbsp;внимательны,&nbsp;используя&nbsp;символ&nbsp;неразрывного&nbsp;пробела.</TD>
</TR> </TABLE>

В браузере Internet Explorer 6 такая таблица будет отображена так:

Будьте внимательны, используя символ неразрывного пробела. Будьте внимательны, используя символ неразрывного пробела.

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

Но пока речь шла только о ширине ячеек таблицы. Как же дела обстоят с высотой? Давайте рассмотрим еще один пример.

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="O" STYLE="table-layout:fixed" WIDTH="200">
<TR>
<TD STYLE="height:50px">Bысота этой ячейки не будет превышать 50 пикселей, поэтому ее содержимое будет обрезаться.</TD>
</TR><TR>
<TD STYLE="min-heigh:200px">Bысота этой ячейки будет равна минимум 200 пикселям, поэтому ее содержимое поместится в ячейку полностью</TD>
</TR> </TABLE>

В браузере Internet Explorer 6 такая таблица будет отображена так, как показано на рисунке. Как видите, высота первой ячейки зафиксирована и равна 50 пикселям, а содержимое, превышающее эту высоту, просто обрезается. Для задания высоты второй ячейки использовалось свойство min-heigh, и ее содержимое уже не обрезалось.

Bысота этой ячейки не будет превышать 50 пикселей, поэтому ее содержимое будет обрезаться.
Bысота этой ячейки будет равна минимум 200 пикселям, поэтому ее содержимое поместится в ячейку полностью

Свойство table-layout:fixed хоть и значительно ускоряет обработку, таблиц, но, к сожалению, работает только в браузерах, выпущенных корпорацией Microsoft. Тем не менее, пока для верстки страниц еще используются таблицы, лучше ускорять их обработку или разбивать большие таблицы на более мелкие. Все же есть надежда на то, что скоро при верстке страниц будут пользоваться исключительно блоками CSS, а таблицы HTML будут применяться только по их прямому назначению — для структуризации данных в виде таблицы.

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 - | - 8 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены