Создание основы сайта: Таблицы
Таблицы. Мы построили две страницы сайта, и настало время задуматься о навигации, то есть о том, какое меню для передвижения по сайту необходимо создать и как оно будет выглядеть.
В простейшем случае для перехода по страницам для создания гиперссылок можно использовать простые текстовые объекты. Проблема будет заключаться в том, что при задании различных настроек окна браузера элементы меню не будут находиться в строго определенных местах экрана, а будут перемещаться по нему, ведь веб-страница - это просто текстовый документ, и появление одного пробела может привести к полной потере форматирования текста. Для разрешения данной проблемы - чтобы было удобно размещать различные элементы на страницах сайта и они не изменяли своего положения относительно друг друга при различных настройках окна браузера - применяют таблицы. Рассмотрим применение таблицы для формирования единого стилевого меню навигации, которое можно использовать на всех страницах. Создадим горизонтальную таблицу, состоящую из одной строки и трех столбцов, в которые и поместим названия пунктов меню нашего сайта.
Для формирования таблицы средствами языка HTML нужно помнить следующее утверждение: «Таблица состоит из строк, а строки – из ячеек».
Таблица создается с помощью парного тега <table></table>, описывающего начало и конец таблицы. Атрибут border задает ширину рамки в пикселах. Если он равен 0, то рамка на экран не выводится, но таблица сохраняет свое форматирование, то есть создаются прозрачные границы таблицы. Атрибут al ign в теге таблицы выравнивает саму таблицу относительно экрана, а ее содержимое не трогает. Атрибут bgcolor задает цвет фона для всей таблицы. Ширину таблицы определяет атрибут width, а высоту - height. Ширина и высота могут указываться как явно в пикселах, так и в процентах от размера окна браузера, что более предпочтительно, так как таблица становится резиновой. Иными словами, можно сжимать или растягивать текстовое содержимое ячейки, избегая тем самым появления в окне браузера полос прокрутки, что улучшает читабельность веб-страницы.
Для формирования строки таблицы используется парный тег <tr></tr>, имеющий атрибуты, аналогичные атрибутам тега <table>. Этот тег заключает в себе теги ячеек, формирующих строку.
Тег формирования ячейки таблицы - парный тег <td></td> с достаточно большим количеством атрибутов:
- align - горизонтальное выравнивание содержимого ячейки;
- valign - вертикальное выравнивание содержимого ячейки; может принимать следующие значения форматирования:
- top - по верхнему краю;
- middle - по центру;
- bottom - по нижнему краю;
- width - ширина ячейки и, соответственно, столбца, в котором находится (в пикселах или в процентах от ширины таблицы);
- height - высота ячейки и, соответственно, всей строки, в которой находится;
- col span - количество объединяемых ячеек в строке;
- rowspan - количество объединяемых ячеек в столбце;
- bgcolor - цвет фона ячейки.
Вернемся на нашу первую страницу index.html, открыв ее в текстовом редакторе, и с помощью определяющих таблицу тегов построим навигационное меню. Рассмотрим текст кода:
- <table width=90% align=center border=0> - строказадает таблицу шириной 90 % от ширины экрана браузера и с невидимой границей;
- <tr align=center> - задаст строку таблицы и явное выравнивание ее содержимого но центру;
- <td>Главная страница </td> - описывает содержимое ячейки;
- <td>Услуги компании</td> - определяет содержимое ячейки;
- <td>Bonpocs и ответы</td> - описывает содержимое ячейки;
- < /tr> - закрывает строку таблицы;
- </table> - закрывает таблицу;
- <br> - дает инструкцию пропустить пустую строку - символ «возврат каретки»;
- <br> - указывает пропустить пустую строку - символ «возврат каретки».
| ← Создание основы сайта: Гиперссылки | Создание основы сайта: Использование списков → |
|---|