Любая страница умеет раздвигаться по высоте по мере роста ее наполнения. А как же заставить ее автоматически изменять свою ширину?
Для того чтобы заставить нашу змею изменять свой рост, прибегнем к такому мощному и незаменимому средству разметки, как таблица.
Таблицы состоят из строчек <TR>, разбитых на определенное количество ячеек <TD>, в которые помещается нужная нам информация или изображение.
Если вы еще не знакомы с таблицами, то просто представьте себе свой эскиз, расчерченный горизонтальными и вертикальными линиями. Теперь возьмите ножницы и разрежте его сперва по горизонтальным, а затем каждую полоску по вертикальным линиям. У вас получилось что-то вроде детской игры PUZZLES. А теперь сложите все нарезанные кусочки друг с другом так, чтобы опять получилась целая картинка. Если вы хорошо постараетесь, то линий разреза почти не будет заметно.
Примерно то же самое происходит при разрезании вашего эскиза на таблицы в HTML. При этом вы можете быть абсолютно спокойны за внешний вид вашей страницы, т.к. каждая ее составляющая будет надежно упакована в свою ячейку, и при указании параметра BORDER=O рамка таблицы не будет отрисовываться и ничто не нарушит целостности вашего дизайна.
Используя таблицы, очень удобно располагать картинки и подписи к ним, не опасаясь, что они перескочат со строчки на строчку при изменении ширины окна; удобно выдерживать интервалы между текстом и рамкой; удобно оптимизировать содержимое страниц, а именно графику; удобно управлять внешним видом страницы, – и если вас заинтересовало, сколько еще удобств у этих чудесных таблиц – почитайте о них хотя бы вот здесь.
У тега <TABLE>, открывающего любую таблицу, есть атрибуты WIDTH и HEIGHT – незаменимые помощники при создании «резиновых» таблиц.
Если эти атрибуты не указаны, то ширина таблицы будет равна ширине помещенного в нее содержимого – не больше, не меньше.
Если значение этих атрибутов указано в пикселях, то таблица будет иметь те размеры, которые в них указаны, и не будет меняться при изменении размеров окна. Она останется прижатой к левому краю (по умолчанию), если не будет дополнительно указан атрибут ALINE, принимающий значение left / center / right, и размещающий таблицу на странице соответственно слева / по центру / справа. (А вот назначение атрибута VALIGN в теге <TABLE> несколько иное. Он служит для вертикального выравнивания текста в каждой ячейке таблицы.)
 | |
На практике для разрешения проблем совместимости с наиболее употребимыми броузерами применяют выравнивание с помощью тегов:
<CENTER></CENTER> (устаревший, но пока еще не совсем забытый тег), <DIV ALIGN=” left / center / right ” ></DIV> или вложенных таблиц, позволяющих организовать еще и выравнивание по вертикали следующим образом:
|
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0"
CELLPADDING="0" CELLSPACING="0">
<TR>
<TD ALIGN=”center” VALIGN=”top”>
<TABLE BORDER="0" WIDTH="100%"
CELLPADDING="0" CELLSPACING="0">
<TR><TD>12345</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
 | | При увеличении уровня вложенности одной таблицы в другую возрастает время загрузки и отрисовки страницы, особенно при работе с Netscape, который допускает не более 6 уровней вложенности таблиц, поэтому необходимо проектировать страницу таким образом, чтобы избегать большого количества (более 3-4) вложений.
|
Если значение атрибутов высоты и ширины указаны в процентах, то размеры каждого столбца таблицы будут пропорционально изменяться при изменении размеров экрана.
И, наконец, если значение этих атрибутов указать равным 100%, то мы получим таблицу, растянутую на весь экран, независимо от его размеров.
Вот так мы и получили резиновую страницу, – на каком бы мониторе ее ни смотрели, она всегда будет растягиваться на весь экран, распределяя содержимое ячеек согласно установленным вами значениям.