5. Таблицы

Таблицы являются стандартом 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 На Главную портала

Только подписка гарантирует Вам оперативное получение информации о новинках данного раздела

 

Желтые стр. СИРИНА - Новости - подписка через Subscribe.Ru

Copyright © КОМПАНИЯ ОТКРЫТЫХ СИСТЕМ. Все права сохраняются. Последняя редакция: августа 11, 2013 21:51:01.