Два слова о таблицах

Два слова о таблицах

Таблицы замечательно подходят для организации информации. Однако если в HTML-документе встречается таблица, то браузеру приходится пробежаться по ней дважды: в первый раз — чтобы выбрать все элементы, рассчитать их взаимные размеры, и чтобы отрисовать их все — во второй раз. Если на странице выводятся большие массивы данных (например, параметры товаров или статистические данные), то гораздо быстрее будет визуализировать такие таблицы в один проход.

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

Необходимо установить для table CSS-атрибут table-layout в значение fixed.

Затем явно определить объекты col для каждого столбца.

И установить для каждого элемента col атрибут width.

В качестве примера можно привести такой фрагмент кода:

<table style="table-layout: fixed">

<!-- первый столбец имеет ширину 100 пикселей -->

<col width="100"></col>

<!-- второй — 200 -->

<col width="200"></col>

<!-- третий и четвертый — по 250 -->

<col width="250"></col><col width="250"></col>

<thead>...</thead>

<tfoot>...</tfoot>

<tbody>...</tbody>

</table>