E-mail Добавить в "Избранное" Сделать "ТвойWeb" стартовой
Здесь находится флеш баннер. Чтобы увидеть его Вы должны установить Flashplayer
 
Новости сайта
02 [F]апреля, 2006
08 [F]декабря, 2005
17 [F]октября, 2005
16 [F]июля, 2005
25 [F]декабря, 2004
======================
Предыдущие новости
<< < 01 02 03 04 05 > >>
 
 
 

Позиционирование элементов на странице при помощи таблиц.
Часть 1.

Этот урок (или совет решайте сами) был написан мною по просьбе одного из пользователей сайта ТвойWeb..

Хочется сказать, что рекомендациями консорциума W3C, позиционировать эелементы следует используя слои (<Layer>). Но таблицы такой гибкий HTML элемент, что подавляющее большинство вебмастеров используют именно их для позиционирования элементов на странице.

Итак приступим. Для начала давайте создадим таблицу во всю ширину и высоту страницы, задав в теге <Table> соответсвующие параметры, а именно выставим width="100%" и height="100%". Сделаем в таблице три строки и три столбца. То есть в итоге должны будем получить 9 одинаковых ячеек.

<table width="100%" height="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

А здесь можно посмотреть, что из этого вышло. Я намеренно выставил у таблицы размер рамки, что бы Вы смогли увидеть границы таблицы. Попробуйте изменить размеры окна браузера и Вы убедитесь, что при любом размере браузера ячейки таблицы остаются одинаковыми по отношению друг к другу и изменяют свои размеры пропорционально размерам окна браузера. Дело в том что размеры таблицы заданы в процентах относительно размеров окна браузера. Если размеры таблицы задать абсолютные, то есть в пикселях, то размер таблицы останется неизменным при изменении размеров окна браузера. Если размер таблицы (независимо от того каким образом задан размер) превышает размеры окна браузера пользователя, то в браузере появятся полосы прокрутки.
В данной таблице размеры указанны только для таблицы, хотя очень часто приходится указывать размеры и для ячеек таблицы, и содержимое ячеек абсолютно одинаково и представляет собой обычный пробел (сочетание символов "&nbsp;" в HTML обозначает обычный пробел, несколько таких символов обозначает равное количество пробелов). Поэтому в данной таблице нет необходимости явно указывать размеры ячеек, чтобы все ячейки имели одинаковый размер. Но как только содержимое ячеек перестанет быть одинаковым (например в одной из ячеек будет не один пробельный символ, а два) тут же таблица потеряет свое свойство при котором все ячейки таблицы были одинаковы между собой (имеется в виду размер ячеек).
Мы не будем добавлять в одну из ячеек второй пробельный символ, а просто в центральную ячейку вставим некую картинку.
Вот код таблицы со вставленной картинкой в центральную ячейку;

<table width="100%" height="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="images/moto_man.jpg" width="200" height="200" border="1"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Я специально указал рамку картинки, чтобы Вы имели полное представление о том, что мы имеем в данный момент. Здесь можно посмотреть что получилось.
Ну как? В этой таблице уже невозможно узнать нашу первую таблицу. Не правда ли?
Давайте исправлять это положение. Укажем размеры ячеек в таблице.
Вот код таблицы, в которой для ячеек указаны относительные размеры (в процентах);

<table width="100%" height="100%" border="1">
<tr>
<td width="33%" height="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
</tr>
<tr>
<td height="33%">&nbsp;</td>
<td><img src="images/moto_man.jpg" width="200" height="200" border="1"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="33%">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Вот что у нас получилось. Посмотрите на код этой таблицы. Мы не стали указывать размеры для абсолютно всех ячеек таблицы. Так в чем же дело? А дело в том, что этого и не нужно делать для данной таблицы. Посмотрите, мы указали ширину ячеек только в первой строке таблицы или сказав по другому в первых ячеках каждого столбца. Все остальные ячейки, находящиеся под ячейками в которых указан параметр width="33%", приобретают для себя тот же параметр width="33%" и это очень удобно, нет необходимости прописывать этот параметр для всех ячеек. Теперь посмотрим где же мы указали высоту ячеек. Как видно из кода высота ячеек так же задана только в трех ячейках, а именно в ячейках первого столбца таблицы или сказав по другому в первых ячейках каждой строки. Все остальные ячейки, идущие в строке за первой ячейкой, в которой указан параметр height="33%", также приобретают этот параметр height="33%". Хочется особенно подчеркнуть, что ширина и высота ячеек в процентах, задается относительно высоты и ширины размеров таблицы.
В результате выполнения браузером кода этой таблицы, Вы могли убедиться что картинка находится не по центру центральной ячейки и как бы приклеена к левой стороне ячейки. Дело в том, что мы не указали ни одного параметра центрирования в ячейке (центрирование по горизонтали "align" и центрирование по вертикали "valign") . Давайте отцентрируем содержимое центральной ячейки по центру. Для этого в теге <td> центральной ячеки укажем параметр align="center" .
Вот код;

<table width="100%" height="100%" border="1">
<tr>
<td width="33%" height="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
</tr>
<tr>
<td height="33%">&nbsp;</td>
<td align="center"><img src="images/moto_man.jpg" width="200" height="200" border="1"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="33%">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

А вот что у нас получилось. Ну теперь вроде все нормально. Используя параметр "align" мы можем отцентровать содержимое по центру, по левому или по правому краям ячейки.
Если Вы просматривали этот код в браузере открытом не во весь экран, то могли убедиться, что высота ячеек второй строки таблицы больше, чем высота ячеек первой и третьей строки, в то же время ячейки первой и третьей строки равны между собой по высоте.
Попробую объяснить в чем дело. Преположим Вы открыли окно браузера не во весь экран и рабочая область браузера (та часть где отображаются вебстраницы) имеет размеры 690х450, то есть ширина = 690 и высота = 450.
Для простоты объяснения я опущу отступы от края окна которые (в нашем примере) выставляет браузер по умолчанию, хотя конечно мы могли бы указать в теге <Body> , нашего документа, соответсвующие параметры, для того чтобы обнулить эти отступы и чтобы таблица начилась и заканчивалась по краям страницы без отступов. Но это тема другого обсуждения.
И так мы знаем что высота ячеек в нашей таблице указана в 33% относительно высоты таблицы, а высота таблицы, в свою очередь, равна 100% от высоты окна, то есть фактически высота таблицы в данном случае равна 450px. У нас три строки, а значит (грубый подсчет) общая высота трех ячеек равна 100% от высоты таблицы. Так как высота таблицы (как мы выяснили) равна 450 px (пиксель), соответственно каждая ячейка должна иметь (в этом не развернутом положении окна) высоту равную 150px. Но в стредней строке у нас, в центральную ячейку вставлена картинка, которая имеет размеры width="200" и height="200". Видите высота картинки выше высоты ячеек. Вот что делает браузер в таком случае. Он раздвигает центральную ячейку таблицы до высоты картинки, а заодно и высоту ячеек строки, в которой находится центральная ячейка. Далее браузер подсчитывает сколько осталось места, и делит его между оставшимися строками таблицы. То же самое будет происходить и с шириной, если в одной из ячеек содержимое будет по ширине превосходить размер ячейки. Только в этом случае оставшееся место будет делиться между оствашимися столбцами таблицы. В нашем случае нирина ячеки получается равной 230px, а это больше чем ширина нашей картинки. Поэтому ширина всех ячеек одинакова. Надеюсь понятно. Попробуйте поэкспериментируйте.
В этом примере я специально выставил ширину и высоту ячеек одинаковыми, чтобы Вы яснее поняли суть. Понятно, что размеры выставляются такие какие нужны в том или ином случае.
Теперь давайте заполним некоторые ячеки таблицы неким контентом (содержимым). Для лучшего восприятия и в связи с тем что дизайн данной страницы не позволяет в полной мере отразить то, что я хочу Вам показать, я вынес код следующей страницы в виде отдельного документа. Сначала посмотрите как выглядит таблица с содержимым в некоторых ячейках.
А здесь посмотрите код этой таблицы. Я специально подсветил код чтоб Вам легче было разобраться где что. Попробуйте менять положение картинок, текста в таблице. Сделайте так чтобы, текст в одной ячейке был отцентрован по левой стороне ячейки, а в другой по правой.
Поменяйте размеры ячеек, применив параметры "width" и "height" как в процентах таки в пикселях. Вообщем поэкспериментируйте. Практика - лучший учитель!

К оглавлению Наверх Дальше