Void Все линии отсутствуют
above Линия над таблицей
below Линия под таблицей
rhs Линия справа от таблицы
lhs Линия слева от таблицы
hsides Линии над и под таблицей
Vsides Линии слева и справа от таблицы
border Все линии присутствуют (по умолчанию)
RULES
none Все линии отсутствуют
cols Линии между столбцами
rows Линии между строками
groups Линии между группами столбцов и строк
all Все линии присутствуют (по умолчанию)
В данной работе использованы frame=”hsides” и rules=”rows”.
Также были использованы вложенные таблицы в таблице.
Если необходимо, чтобы форматированию подвергся определенный фрагмент текста, надо применить тэг <BR> с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой обтекание отменяется. Значения left, right, all атрибута CLEAR позволяет определить, с какой стороны текст далее будет свободен от таблицы.
Выполнение работы
Разработанный код сайта:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Реки Белгорода</title>
</head>
<body style="background-image:url(блёстки.gif)">
<p style="font-size:45px; color:#2368F1" align="center"><strong><em>Реки Белгородского района</em></strong></p>
<table style="background-image:url(фон1.jpg); font-size:20px" align="center" border="6" cellspacing="8"cellpadding="8"
width="55%" height="40%" bordercolor="#470AB2">
<caption style="font-size:24px"> Таблица 1. Координаты рек </caption>
<tr>
<th rowspan="2">Название</td>
<th colspan="2">Координаты</td>
</tr>
<tr>
<th>с.ш.</td>
<th> в.д.</td>
</tr>
<tr>
<td style="color:#790510">Уды</td>
<td>50° 32′ 38″</td>
<td>36° 18′ 58″</td>
</tr>
<tr>
<td style="color:#790510">Везёлка</td>
<td>50° 35′ 19″</td>
<td>36° 17′ 45″</td>
</tr>
<tr>
<td style="color:#790510">Лопань</td>
<td>50° 29′ 25″</td>
<td>36° 21′ 53″</td>
</tr>
</table>
<br>
<table rules="rows" align="left" border="4" cellspacing="8" cellpadding="10" style="font-size:20px"; bgcolor="#ffffff"
width="70%" height="50%" >
<caption style="font-size:24px"> Таблица 2. Местоположение рек в Белгородском районе </caption>
<tr bgcolor="#30B7F0">
<th>Фото реки</th>
<th>Местоположение</th>
</tr>
<tr>
<td align="center"><img src="уды.jpg" width="40%" height="40%" hspace="10" vspace="0" alt="Уды" title="Река Уды"/>
<p>Уды</p>
</td>
<td align="center">с.Бессоновка</td>
</tr>
<tr>
<td align="center"><img src="река везёлка.jpg" width="40%" height="40%" hspace="10" vspace="0" alt="везёлка" title="Река
Везёлка"/>
<p>Везёлка</p>
</td>
<td align="center">г.Белгород</td>
</tr>
<tr>
<td align="center"><img src="Лопань.jpg" width="40%" height="40%" hspace="10" vspace="0" alt="Лопань" title="Река
Лопань"/>
<p>Лопань</p>
</td>
<td align="center">Холм Вовкивня, между балками Угрим и Угримчик</td>
</tr>
</table>
<table frame="hsides" align="right" border="5" cellspacing="5" cellpadding="8" style="font-size:20px";
bgcolor="#ffffff" width="55%" height="40%">
<caption style="font-size:24px"> Таблица 3. Характеристики рек </caption>
<tr bgcolor="#30CA0E">
<th>Название</th>
<th>Длина</th>
<th>Бассейн</th>
<th>Расход воды</th>
</tr>
<tr>
<td>Уды</td>
<td align="center">164 км</td>
<td align="center">3894 км<sup>2</sup></td>
<td align="right">8,63 м<sup>3</sup>⁄с</td>
</tr>
<tr>
<td bgcolor="F95C39" width="150" height="100">Везёлка</td>
<td align="center">21 км</td>
<td align="right">132 км<sup>2</sup></td>
<td align="left">1,70 м<sup>3</sup>⁄с</td>
</tr>
<tr>
<td>Лопань</td>
<td align="center">93 км</td>
<td>2000 км<sup>2</sup></td>
<td align="center">2,24 м<sup>3</sup>⁄с</td>
</tr>
</table>
<br clear="right">
<p><font size="5">Также очень важно знать водную систему.</p>
<dl>
<dt><strong>Водная система</strong></dt>
<dd>Совокупность естественных и искусственных водоёмов, которые образуют единый водный путь.</dd>
</dl>
</font>
<table style="background-image:url(светлый.jpg); font-size:20px" align="center" cellspacing="3" cellpadding="5"
width="55%" height="40%" bordercolor="#078D26" border="2">
<caption align="bottom" style="font-size:24px"> Таблица 4. Водные системы </caption>
<tr>
<th>Река</td>
<th>Расположение</td>
</tr>
<tr>
<td width="25%" valign="top">Уды</td>
<td>
<table align="center" bgcolor="#ffffff" border="1" cellspacing="3" cellpadding="5" width="80%" height="40%">
<tr>
<th>Страна</td>
<th>Водная система</td>
</tr>
<tr>
<td>Россия, Украина</td>
<td>Северский Донец → Дон → Азовское море</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="25%" valign="middle">Везёлка</td>
<td>
<table align="center" bgcolor="#ffffff" border="1" cellspacing="3" cellpadding="5" width="80%" height="40%">
<tr>
<th width="36%">Страна</td>
<th>Водная система</td>
</tr>
<tr>
<td>Россия</td>
<td>Северский Донец → Дон → Азовское море</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="25%" valign="bottom">Лопань</td>
<td>
<table align="center" bgcolor="#ffffff" border="1" cellspacing="3" cellpadding="5" width="80%" height="40%">
<tr>
<th>Страна</td>
<th>Водная система</td>
</tr>
<tr>
<td>Россия, Украина</td>
<td> Уды → Северский Донец → Дон → Азовское море</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table style="font-size:20px; color:#1B2284" align="center" cellspacing="3" cellpadding="5" bgcolor="#FCF29B" bordercolor="#FD0922" border="4" width="50%" height="40%">
<caption align="bottom" style="font-size:24px"> Таблица 5. Описание </caption>
<tr>
<th rowspan="3" bgcolor="#DBB2FC">Река</th>
<th colspan="7" bgcolor="#71D241">Описание</th>
</tr>
<tr bgcolor="#4DB7FA">
<th colspan="3">Гидрологические характеристики русла</th>
<th colspan="2">Режим реки</th>
<th colspan="2">Характеристики бассейна</th>
</tr>
<tr style="background-image:url(радуга.jpeg)">
<th>Ширина,<p> м</p> </th>
<th>Глубина,<p> м </p></th>
<th>Наклон реки,<p> м ⁄ км</p> </th>
<th>Уровень подъёма реки во время весеннего паводка,<p> м</p></th>
<th>Скорость течения, <p> м ⁄ с </p></th>
<th>Лесистость, <p> % </p></th>
<th>Заболоченность, <p> % </p></th>
</tr>
<tr align="center">
<td bgcolor="#ffffff">Уды</td>
<td>6-8</td>
<td>0,1-0,8</td>
<td>0,64</td>
<td>1,5-2</td>
<td>1,18-2,57</td>
<td>10</td>
<td>1</td>
</tr>
<tr align="center">
<td bgcolor="#ffffff">Везёлка</td>
<td>7-8</td>
<td>1-2</td>
<td>0,4</td>
<td>до 2</td>
<td>0,15-1</td>
<td>10</td>
<td>3</td>
</tr>
<tr align="center">
<td bgcolor="#ffffff">Лопань</td>
<td>1-20</td>
<td>0,3-1</td>
<td>0,89</td>
<td>1,5-2</td>
<td>0,2-0,8</td>
<td>11</td>
<td>1,2</td>
</tr>
</table>
</body>
</html>
Копия экрана, иллюстрирующая работу:
В первой таблице присутствует графический фон, объединены ячейки по горизонтали и по вертикали, граница таблицы имеет сиреневый цвет. Цвет текста названия рек изменён на красный. Использованы ячейки с заголовками, а также сам заголовок таблицы.
Во второй таблице вставлены изображения, и применён тэг rules=”rows”, который провёл линии между строками, а между столбцами убрал любые разграничители. Также раскрашена в отличный от всей таблицы цвет самая первая строка.
В третьей таблице раскрашена отдельная ячейка, текст в ячейках стоит слева. Справа и посередине. Также применён тэг frame=”hsides”, который оставил границы таблицы только сверху и снизу.
Далее применён тэг <br clear="right">, который позволил написать текст уже после таблицы.
В четвёртой таблице вставлены вложенные таблицы, а также названия рек написаны сверху, посередине и снизу ячеек. Граница таблицы раскрашена в зелёный цвет.
В пятой таблице использовано объединение ячеек по вертикали и горизонтали, изменён фон таблицы, а также применены разные цвета в том числе и графическая картинка. Цвет всего текста тёмно-синий. Данные выровнены по центру ячеек.
Рис.1 Разработанная web-страница(начало)
Рис.2 Разработанная web-страница (продолжение 1)
Рис.3 Разработанная web-страница (продолжение 2)