Ускоряем загрузку таблиц
HTML (HyperText Markup Language — язык разметки гипертекста) был создан в 80-ых годах. Для людей, которые его создавали, была важна именно разметка. Они были заняты научной работой и поэтому о способах оформления, макетирования и т.д. особо не беспокоились.
Когда с помощью HTML стали создавать сайты, выяснилось, что это было большим упущением. Ведь хочется оформить свои материалы покрасивее, да и сами материалы надо сделать удобочитаемыми. Ведь, повторюсь,HTML – это язык разметки, а не оформления или макетирования! Поэтому для того, чтобы сайт выглядел так, как представляет себе его создатель, стали использоваться самые разные методы. Наиболее распространенный пример — верстка страниц с помощью таблиц.
Все знают, в повседневной жизни таблицы являются прекрасным инструментом для упорядочивания информации. В язык HTML они и были введены именно как таблицы. Уже потом, позже, в связи с отсутствием других приемлимых вариантов, их стали использовать в качестве средства верстки.Этот метод получил большую популярность, так как очень удобен. Таблица служит каркасом, в ячейках которой размещается нужная информация. И сейчас таблицу в роли каркаса можно увидеть на большинстве сайтов.
Однако этот способ, несмотря на свое удобство, имеет и несколько недостатков, которые могут повлиять на скорость загрузки всей страницы. А скорость загрузки, как вы знаете, имеет большое значение.
Чтобы правильно отобразить содержимое таблицы, браузеру нужна информация о всех ее свойствах, точном размере ячеек. А для этого ему нужно знать, что в этих ячейках находится. И пока браузер не прочитает последнее слово в таблице, она не отобразится. А если вся страница состоит из таблицы? Тогда посетитель будет некоторое время смотреть в пустой экран, особенно если в таблице находится большой объем информации.
Каркас страницы также может состоять из нескольких таблиц, вложенныхдруг в друга. Это увеличивает размер HTML-кода. А чем больше размерHTML-кода, тем медленнее загружается страница. Но раз есть проблема, тообязательно существуют способы ее решения. В данной статье я расскажу онекоторых из них.
Разбивка одной таблицы на несколько
Проблема: Таблица загружается слишком долго
Способ решения проблемы: Разбить одну таблицу на несколько! Эврика! 🙂
Например, вот так:
До разбивки
После разбивки
Для примера, как это можно реализовать с помощью HTML, приведу таблицу из трех строк до и после разбивки на несколько таблиц.
До
Первая строка
Вторая строка
Третья строка
После
Первая таблица
Вторая таблица
Третья таблица
Правда, при таком небольшом объеме информации, прием разбиения одной таблицы на несколько лучше не применять. Наоборот, это только увеличит «вес» страницы. Но если информации на странице много — это то, что нужно.
Это был простой пример и таблицы в таком виде редко используют для создания каркаса. Более характерен такой пример каркаса:
1
2 3
4
Сделаем каждую из ячеек отдельной таблицей:
Таблица 1
Таблица 2
Таблица 3
Таблица 4
Таблица 1 и 4 имеют ширину 90%. Значит, таблицы 2 и 3, которые находятся между ними, должны иметь в сумме такую же ширину. Что мы и наблюдаем — 30% и 60%. Еще существует задача — поместить таблицы 2 и 3 рядом. Для этого для таблицы 2 был задан атрибут align, его значение — left. Это значит, что таблица выровнена по левому краю. И следом идущая таблица будет ее обтекать.
Неоценимый помощник COL
Выше я уже писала, что браузер не может отобразить содержание таблицы, пока не получит всю информацию о ее свойствах. Но этот процесс можно ускорить.
В HTML существует тег COL. Он позволяетсразу задать атрибуты для одной или нескольких ячеек таблицы. Приналичии этого тега браузер начинает показывать содержимое таблицы, недожидаясь ее полной загрузки.
Пример:
Первая ячейка с шириной 60%
Вторая ячейка с шириной 30%
Кроме использованных в примере процентов, для параметра WIDTH можно задавать значение в пикселах или использовать символ «*», который обозначает всю доступную ширину.
Если две колонки имеют одинаковые параметры, их можно сгруппировать с помощью параметра SPAN тега COL.
Пример:
Первая ячейка с шириной 45%
Вторая ячейка с шириной 45%
С помощью тега COL можно также задавать вертикальное (VALIGN) и горизонтальное (ALIGN) выравнивание ячеек. Пример:
Первая ячейка с шириной 45%, горизонтальным выравниванием по центру и вертикальным выравниванием по верхнему краю
Вторая ячейка с такими же параметрами
Для параметра ALIGN можно также задавать значения:
left — выравнивание содержимого по левому краюcenter — выравнивание по центруright — выравнивание по правому краю
Для параметра VALIGN:
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линииbottom — выравнивание по нижнему краюmiddle — выравнивание по серединеtop — выравнивание по верхнему краю
Использование тега COL действительнопоможет ускорить загрузку таблицы. Но… Только в браузере InternetExplorer. Остальные браузеры просто проигнорируют незнакомый тег ипродолжат загружать таблицу как обычно, так что по этому поводу нестоит волноваться. И если учесть, что более 80% посетителей сайтаиспользуют именно Internet Explorer, использовать тег COL в большинстве случаев целесообразно.
Мой блог находят по следующим фразам