Таблицы Создание таблицы
advertisement
Таблицы
Создание таблицы
До сих пор мы создавали документы, в которых текст располагался в одной колонке.
На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффективно выделить фрагмент текста, на который вы хотите обратить внимание читателя.
Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну и конечно же, таблица
нужна для отображения информации в табличном виде. Часто таблица используется для
представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню,
представим ссылки на другие страницы сайта. Это меню мы поместим у левого края экрана.
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 (Фотоальбом) все рисунки (фотографии) также разместите в
виде таблицы.
