Таблицы являются стандартом HTML, мощным
дополнением к его основам.
Вставим во вторую страничку таблицу с именами участников похода.
Тэги для формирования таблицы.
1. Для вставки таблицы используются парные
тэги
<Table>…</Table>.
Атрибуты тэга <Table>
BORDER – ширина обрамления или границы. (Можно Border=0
или NOBorder)
WIDTH – ширина таблицы, Height – высота таблицы.
BGCOLOR – цвет фона под таблицей.
cellpadding – расстояние от границы таблицы до текста или
изображения.
cellspacing – расстояние между ячейками таблицы.
2. Тег названия таблицы </CAPTION>.
У этого тэга один атрибут, определяющий положение названия таблицы, -
ALIGN. Он может принимать два значения:
ALIGN=top – над таблицей.
ALIGN=bottom – под таблицей.
3. <TR>Строка таблицы</TR> - Тег строки
таблицы.
У этого тэга три атрибута, причем два из них могут иметь различные
значения одно из трех.:
ALIGN =LEFT
ALIGN=RIGHT
ALIGN=CENTER (по левому краю, по правому и по центру).
VALIGN =TOP
VALIGN =BOTTOM
VALIGN =MIDDLE - Вертикальное выравнивание внутри строки таблицы ВВЕРХ,
ВНИЗ и ЦЕНТРУ
BGCOLOR – цвет фона внутри строки.
4. <TD>Столбец таблицы</TD>
- Тэг столбца таблицы может иметь следующие атрибуты:
ALIGN – выравнивание внутри столбца, имеет значения LEFT, RIGHT и
CENTER;
VALIGN – вертикальное выравнивание внутри строки таблицы, значение TOP
(верх), BOTTOM (низ), MIDDLE (центр).
COLSPAN, ROWSPAN – растягивание клетки на несколько столбцов, строк.
BGCOLOR – цвет фона под столбцом.
5. <TH> заголовок</TH> - Тэг для заголовка столбца или строки таблицы. Атрибуты тэга те же, что и у тэгов столбца.
Для нашего сайта Вуокса на второй страничке содержится пример таблицы " Состав участников похода".
6. Пример листинга исходного кода второй страницы
сайта "Вуокса". Файл
Page2.html
в браузере.
Кликнув по ссылке, вы можете перейти на данную
Web-страницу.
<HTML>
<head><title>Участники похода></title>
</head>
<body>
<BODY BGCOLOR="white">
<H1>
<CENTER>Состав учстников похода</CENTER></H1>
<table border=5>
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>День рождения</th>
<th>Увлечения</th>
<th>Телефон</th>
</tr>
<tr>
<td>Иванова</td>
<td>Светлана</td>
<td>29.08.86</td>
<td>IBM</td>
<td>302-33-33</td>
</tr>
<tr>
<td>Петрова</td>
<td>Оксана</td>
<td>22.03.87</td>
<td>книги</td>
<td>153-33-44</td>
</tr>
</table>
<hr>
<center><a href="PAGE1.htm">назад</a></center>
<br>
<center><IMAGE SRC= "Members.JPG" =155 HEIGHT=130 >
</center>
</body>
</html>
7. Пример второго варианта Web-странички с таблицами Page22.html.
Пример демонстрирует разные варианты
создания таблицы. Таблица шириной во весь экран без границы. Цвет фона
всей таблицы бирюзовый. Здесь также продемонстрирована возможность фон
всей Web-страницы создать из файла (облачное небо).
Подробнее о
цветах Web-страницы - в следующей главе.
Строка заголовка столбцов имеет шрифты разных размеров.
Первая строка таблицы имеет цвет фона желтый, а первая ячейка -
коричневый цвет фона. Во второй ячейке этой строки фон из файла
(облачное небо).
В первой строке текст выравнен по центру ячейки, а во второй строке - по
левому краю.
Здесь вставлена также табличка, состоящая из одной строки и одного
столбца, которая позволяет заключить в рамку текст "СВОБОДНАЯ СТИХИЯ".
Листинг файла
Page22.html.
<HTML>
<head><title>Участники похода></title></head>
<BODY BGCOLOR="white" BACKGROUND="07[1].JPG">
<center><a href="Chapter5.htm">Вернуться к Главе 5</a></center>
<H1><CENTER>Состав участников похода</CENTER></H1>
<table border=0 bgcolor="#00f0f0" width=100% height=30%>
<tr>
<th> <FONT SIZE=10>Фамилия </th>
<th>Имя</th>
<th>День рождения</th>
<th>Hobby</th>
<th>Телефон</th> </font>
</tr>
<tr align=center bgcolor="yellow">
<td bgcolor="brown">Иванова</td>
<td BACKGROUND="07[1].JPG">Светлана</td>
<td>29.08.87</td>
<td>IBM</td>
<td>302-33-33</td>
</tr>
<tr>
<td>Петрова</td>
<td>Оксана</td>
<td>22.03.86</td>
<td>книги</td>
<td>153-33-44</td>
</tr>
</table>
<hr>
<a href="Page1.htm">назад</a></center>
<br> <img src="horse.jpg" width="320" height="240"><img src="horse.jpg"
width="320" height="240">
<table border=3>
<tr><td><font size=4 color="blue">
СВОБОДНАЯ СТИХИЯ</FONT></td>
</tr></table/>
</body>
</html>
Практическая работа.
Создать таблицу для 5 человек на второй страничке сайта..
Изменить ширину обрамления таблицы. Указать цвет фона для таблицы.
Выполнить гиперсвязь страниц 1 и 2.
 |
 |
 |
