Для размещения на страницах сайта картинок и текста в нескольких колонках отдельных друг от друга, используют создание таблицы и ее последующую вставку. Таблицы могут применяться для создания меню сайта и отображения каких-либо данных в табличном виде. Рассмотрим пример создания таблицы состоящей пока только из одной колонки и нескольких ячеек, где можно будет расположить меню сайта. Для этого потребуется новый файл назовем его menu.html. Выполняем (пуск – программы – стандартные – блокнот), набираем стандартный код из которого состоит каждая страничка сайта назвав его <title>«Меню сайта»</title>, а затем будем уже производить в нём изменения:
<html>
<head>
<title>«Меню сайта»</title>
</head>
<body>
</body>
</html>
Таблица всегда заключается между тегами <table>…</table>, внутри этих тегов располагаются теги <tr>…</tr>, которые служат для создания строк таблицы, а уже внутри строчных тегов прописываются теги <td>…</td>, каждая пара которых образует отдельный столбик таблицы. Между тегами <td>…</td> также пишется текстовое содержание, например пунктов меню:
<table>
<tr><td>Введение</td></tr>
<tr><td>Создание сайта</td></tr>
<tr><td>Раскрутка сайта</td></tr>
<tr><td>Администратирование сайта</td></tr>
<tr><td>Антивирусная защита</td></tr>
</table>
Вставка таблиц на страницу
Теперь полученный код нужно будет вставить в HTML-код странички menu.html между тегами тела документа <body>…</body> и сохранить изменение, затем процедура проверки стандартная через браузер. По умолчанию таблица будет располагаться по левому краю, но её место положение всегда можно изменить применив атрибут align со значениями center или right: align=center – выравнивание по центру страницы, align=right – выравнивание по правому краю страницы.
Обратите внимание, что при открытии странички в браузере видны только сами пункты меню расположенные друг под другом, так где же сама вставленная табличка? Все дело в том, что для визуального отображения табличной формы, нужно в теге <table> применить атрибут borler с присвоением ему цифрового значения, этот атрибут уже рассматривался в примере обвода рисунка рамкой. Задание атрибуту borler=1, толщина рамки таблицы будет соответствовать одному пикселу. Полный код страницы будет выглядеть так:
<html>
<head>
<title>«Меню сайта»</title>
</head>
<body>
<table border=1>
<tr><td>Введение</td></tr>
<tr><td>Создание сайта</td></tr>
<tr><td>Раскрутка сайта</td></tr>
<tr><td>Администратирование сайта</td></tr>
<tr><td>Антивирусная защита</td></tr>
</table>
</body>
</html>
Всавленная таблица в страницу по умолчанию будет растягиваться на весь экран пока не вместит все содержимое текстовой строки, но можно и зафиксировать её размеры в определенных пределах с помощью атрибута
width
С присвоением ему цифрового значения каждая единица которого будет равна одному пикселу ширины таблицы, то есть если width=15, - значит таблица будет иметь определенную ширину в 15 пикселов. Данный атрибут вставляется в открывающий тег <table> так же как и атрибут border.
<table border=1 width=15 >
Сделав необходимое изменение кода мы получаем табличку заданной нами ширины и если пункт меню превысит в ячейке ширину 15 пикселов, то он отобразится в две или более строк.
Для центрирования пунктов меню или для выделения их жирном шрифтом, рекомендовано вместо тегов <td>…</td> ограничивающих текст пункта меню применять теги <th>…</th>. Можете сами попробовать увидеть произошедшие изменения заменив теги <td></td> на <th></th>.
Здесь нужно понимать, что раз задается ширина ячейки, то можно задать и её высоту, так как по умолчанию она будет растягиваться вниз в зависимости от наполнения текстовым содержимым. Для фиксации высоты ячейки при вставке таблиц на страницу, используют атрибут
height
которому так же присваивается определенное цифровое значение, которое будет соответствовать height=1=1 пиксел.
Можно оперировать цветом ячеек таблицы, строк или столбцов по отдельности, а так же задавать цвет всей таблице применив атрибут bjcolor, всё будет зависеть от того в какой тег Вы его вставите в <title>, <th> или <tr>.
Для того чтобы у нас получилось полноценное меню, необходимо каждому его пункту присвоить ссылку, при нажатии на которую происходил переход на другую страницу сайта соответствующую этому пункту. Не буду расписывать подробно как это сделать, так как этот урок есть в меню сайта «Создание ссылок», приведу лишь одну измененную строчку кода, а дальше Вы справитесь сами, только одно «НО», в примере появилась новая страничка сайта admin.html – её тоже можете создать как и все остальные в блокноте опыт у Вас уже есть, но не забывайте, что при сохранении новой страницы сайта файл должен обязательно иметь формат html, иначе браузер не будет отображать его содержимое!
