Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Свойство table-layout ускоряет загрузку сложных таблиц

27 октября 2001 г.

Традиционно браузер сперва загружает табличный макет (включая сам контент), вычисляет необходимые размеры ячеек, а потом только отображает таблицу на экране. А поскольку сайты всё ещё обычно верстаются по-старинке, т. е. с применением таблиц, а не с помощью DIV'ов, то свойство table-layout со значением fixed может значительно уменьшить время загрузки страницы.

Это действительно так. Дело в том, что традиционно браузер сперва загружает табличный макет (включая сам контент), вычисляет необходимые размеры ячеек, а потом только отображает таблицу на экране. А поскольку сайты всё ещё обычно верстаются по-старинке, т. е. с применением таблиц, а не с помощью DIV'ов, то свойство table-layout со значением fixed может значительно уменьшить время загрузки страницы.

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

Итак, приведу пример, в котором для наглядности высота ячеек была намеренно указана меньше высоты содержащегося в них текста:

Ячейка нумер 1 Ячейка нумер 2 Ячейка нумер 3
Ячейка нумер 1b Ячейка нумер 2b Ячейка нумер 3b

Верстается эта таблица таким образом:

<table style="table-layout:fixed">
<col style="width:100px"><col style="width:100px"><col style="width:100px">
<tr style="height:10px"><td>Ячейка нумер 1</td><td>Ячейка нумер 2</td><td>Ячейка нумер 3</td></tr>
<tr style="height:10px"><td>Ячейка нумер 1b</td><td>Ячейка нумер 2b</td><td>Ячейка нумер 3b</td></tr>
</table>

Для большей гибкости рекомендуется все стили перенести в отдельный CSS файл.

Ну и наконец, весь механизм table-layout работает только лишь в Internet Explorer 5+, что очень прискорбно, ибо такое полезное свойство пригодилось бы в Netscape Navigator или Opera…

P. S. В Internet Explorer 6 в режиме совместимости со стандартами контент не обрезается, если он превышает высоту ячейки.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

Подскажем где купить русский мобильный трафик недорого.
LiveInternet