Таблицы Создание таблицы До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффективно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню. Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на другие страницы сайта. Это меню мы поместим у левого края экрана. 1. В редакторе EditPlus создайте новый текстовый файл: File -> New.. -> Normal Text. 2. Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны: <HTML> <HEAD> <TITLE> Меню </TITLE> </HEAD> <BODY BGCOLOR=SILVER> </BODY> </HTML> Каждая таблица начинается тэгом <TABLE> и заканчивается тэгом </TABLE>. Строки таблицы образуются парой тэгов <TR></TR>, между которыми располагаются пары тэгов <TD></TD>. Каждя пара этих тэгов образует один столбец. Между открывающим тэгом <TD> и закрывающим </TD> помещается текст или любое другое содержимое ячейки. Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта должен иметь следующий вид: <TABLE> <TR><TD>Главная страница</TD></TR> <TR><TD>Новости</TD></TR> <TR><TD>О компании</TD></TR> <TR><TD>Партнеры</TD></TR> <TR><TD>Прайс-лист</TD></TR> <TR><TD>Координаты</TD></TR> </TABLE> 3. Вставьте это код между тэгами <BODY> и </BODY>. 4. Сохраните файл под именем table.html. Запустите его в браузере. Как видите, созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <TABLE> атрибут ALIGN=CENTER для выравнивания таблицы по центру или атрибут ALIGN=RIGHT – для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <TABLE> атрибут BORDER, указав в качестве его значения толщину рамки в пикселях. 5. Добавьте в тэг <TABLE> атрибут BORDER=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксель: <TABLE BORDER=1> Теперь таблица отображается с рельефными границами. 6. Сохраните содержимое файла и посмотрите результат в браузере. Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселях с помощью атрибута WIDTH. 7. Установите для таблицы ширину 150 пикселей, добавив атрибут WIDTH=150 в открывающий тэг <TABLE> так, чтобы он принял вид: <TABLE BORDER=1 WIDTH=150> 8. Сохраните и посмотрите результат. При использовании для формирования столбцов таблицы тэгов <TD></TD> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Для выравнивания по центру или по правому краю используется атрибут ALIGN. Он может принимать следующие значения: CENTER – выравнивание по центру, RIGHT – по правому краю, LEFT – по левому краю. 9. Выровняйте содержимое всех ячеек нашей таблицы по центру. Для этого необходимо внести в файл следующие изменения: < TABLE BORDER=1 WIDTH=150> <TR><TD ALIGN=CENTER>Главная страница</TD></TR> <TR>< TD ALIGN=CENTER >Новости</TD></TR> <TR>< TD ALIGN=CENTER >О компании</TD></TR> <TR>< TD ALIGN=CENTER >Партнеры</TD></TR> <TR>< TD ALIGN=CENTER >Прайс-лист</TD></TR> <TR>< TD ALIGN=CENTER >Координаты</TD></TR> </TABLE> 10. Сохраните и посмотрите результат. Кроме того, в тэге <TD> можно использовать следующие атрибуты: WIDTH – для указания ширины ячейки в пикселях; HEIGHT – для определения высоты ячейки; VALIGN – для вертикального выравнивания данных в ячейке по верхнему (TOP), нижнему (BOTTOM) краям и середине (MIDDLE) ячейки. По умолчанию VALIGN=MIDDLE. Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут BGCOLOR соответственно в тэг <TD>, <TR> или <TABLE>. Ширину таблицы и ее ячеек можно также задавать в процентах соответственно от ширины страницы и ширины таблицы. Продемонстрируем это на примере размещения меню, которое мы создавали на прошлом занятии в файле index.html (в папке Homepage). 11. В редакторе EditPlus откройте файл index.html (File -> Open…). 12. В коде этого файла внесите следующие изменения: После горизонтальной черты (тэга <HR>) вставьте такой код: <TABLE WIDTH=”100%” BORDER=1> <TR> <TD WIDTH=”25%”>Главная</TD> <TD WIDTH=”25%”>Обо мне</TD> <TD WIDTH=”25%”>Фотоальбом</TD> <TD WIDTH=”25%”>Контактная информация</TD> </TR> </TABLE> 13. Сохраните изменения и посмотрите результат. Изменим следующее: разместим содержимое ячеек по центру, выделим полужирным начертанием и добавим ссылки. Если требуется разместить содержимое во всех ячейках строки, атрибут ALIGN можно добавить в тэге <TR>: <TABLE WIDTH=”100%” BORDER=1> <TR ALIGN=CENTER> <TD WIDTH=”25%”><A HREF=”index.html”><B>Главная</B></A></TD> <TD WIDTH=”25%”><A HREF=”about.html”><B>Обо мне</B></A></TD> <TD WIDTH=”25%”><A HREF=”photo.html”><B>Фотоальбом</B></A></TD> <TD WIDTH=”25%”><A HREF=”kontakt.html”><B>Координаты</B></A></TD> </TR> </TABLE> Для определения интервалов в таблице используются атрибуты CELLSPACING и CELLPADDING, помещенные в тэге <TABLE>. Атрибут CELLSPACING определяет расстояние между ячейками в пикселях (по умолчанию это значение равно 2). Атрибут CELLPADDING определяет расстояние в пикселях между содержимым ячейки и ее границами (по умолчанию это значение равно 1). 14. В файле index.html в тэг <TABLE> добавьте атрибуты CELLSPACING и CELLPADDING: <TABLE WIDTH=”100%” BORDER=1 CELLSPACING=0 CELLPADDING=5> Видим, что ширина границы уменьшилась, а расстояние от текста до границ ячеек увеличилось. Объединение ячеек таблицы Для объединения ячеек используются атрибуты COLSPAN (объединение по горизонтали) и ROWSPAN (объединение по вертикали). 15. В файл table.html добавьте следующий код и посмотрите результат. Демонстрация ROWSPAN: <TABLE BORDER=1 WIDTH=150> <TR> <TD> 1 </TD> <TD ROWSPAN=2> 2 </TD> <TD> 3 </TD> </TR> <TR> <TD> 4 </TD> <TD> 5 </TD> </TR> </TABLE> Демонстрация COLSPAN: < TABLE BORDER=1 WIDTH=150> <TR> <TD> 1 </TD> <TD COLSPAN=2> 2 </TD> </TR> <TR> <TD> 3 </TD> <TD> 4 </TD> <TD> 5 </TD> </TR> </TABLE> Окрашивание таблиц и рамок К таблице можно добавить фон, цвет которого отличается от цвета остальной части страницы. Можно также окрасить строки или отдельные ячейки, чтобы выделить их на фоне остальной таблицы. Это делается с помощью атрибута BGCOLOR, применять этот атрибут можно к <TABLE>, <TR> и <TD>. С помощью атрибута BORDERCOLOR можно изменить цвет рамки таблицы. 16. В файл table.html добавьте следующий код и посмотрите результат. <TABLE BORDER=3 WIDTH=150 BORDERCOLOR =BLUE> <TR> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD> </TR> </TABLE> Макетирование страниц с помощью таблиц Создание вложенных таблиц – это хороший пример творческого подхода к макетированию страниц. Данный метод следует использовать в случае, если ваша страница со- держит множество различных элементов и вы хотите, чтобы таблицы находились в разных местах экрана. 17. Откройте в редакторе файл index.html и внесите в него следующие изменения (цвета и фон выбирайте по своему усмотрению). Текст, заключенный в фигурные скобки, набирать не надо, это пояснения к кодам: … {Задаем параметры внешнего вида страницы} <BODY BGCOLOR=WHITE TEXT=”#000033” LINK=”#FFFFFF” ALINK=”#FFFFFF” VLINK=”#FFFFFF” MARGINHEIGHT=0 TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0> {Расположим содержимое страницы в таблице, которая, в свою очередь, размещается по центру и занимает 80% от ширины страницы} <CENTER> {Основная таблица} <TABLE WIDTH="80%" CELLSPACING="0" CELLPADDING="0" HEIGHT="100%" BORDER=1 BORDERCOLOR="#3F3FA0"> {В это строке справа будет размещен логотип (рисунок), а слева или по центру – заголовок страницы} <TR HEIGHT="70" BGCOLOR="#3F3FA0"> {Ячейка для логотипа} <TD HEIGHT="70" WIDTH=”70”> <IMG SRC="" WIDTH="70" HEIGHT="70" ALT="Логотип"> </TD> {Ячейка для заголовка} <TD>Заголовок</TD> </TR> {В этой строке в виде таблицы будет вставлено меню (используется вложенная таблица)} <TR HEIGHT=”20”> <TD COLSPAN=2> {Меню} <TABLE WIDTH="100%" BORDER=1 BORDERCOLOR=WHITE BGCOLOR="#3F3FA0" CELLSPACING="0" CELLPADDING="5"> <TR ALIGN=CENTER> <TD WIDTH="25%"> <A HREF="index.html"><B>Главная</B></A> </TD> <TD WIDTH="25%"> <A HREF="about.html"><B>Обо мне</B></A> </TD> <TD WIDTH="25%"> <A HREF="photo.html"><B>Фотоальбом</B></A> </TD> <TD WIDTH="25%"> <A HREF="kontakt.html"><B>Координаты</B></A> </TD> </TR> </TABLE> </TD> </TR> {Это основная часть страницы, где буде размещаться остальной текст} <TR VALIGN=TOP> <TD COLSPAN=2> {Это основная часть страницы, где буде размещаться остальной текст} </TD> </TR> </TABLE> </CENTER> </BODY> 18. Создайте аналогичную структуру и в файлах about.html, photo.html, kontakt.html для того, чтобы ваш сайт имел одинаковое оформление. 19. В файле photo.html (Фотоальбом) все рисунки (фотографии) также разместите в виде таблицы.