https://pastein.ru/t/nkD
Загрузка данных
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Применение таблиц</title>
</head>
<body>
<h1 align="center">Таблицы</h1>
<p><b>Таблицы (tables)</b> очень широко применяются на <b>Web-страницах</b> благодаря своей универсальности
и возможности расположить содержание страницы нужным образом. Для создания таблиц в языке
HTML предусмотрены всего три тэга: тэг <b>table</b> определяет всю таблицу, тэг <b>tr</b> (от Table Row)
определяет строку таблицы и тэг <b>td</b> (от Table Data) - определяет ячейку страницы. Тэг
заголовка строки или столбца таблицы <b>th</b> (от Table Header) аналогичен тэгу td, но его текстовое содержание
автоматически центрируется и дается жирным шрифтом. Самое замечательное в таблицах - возможность
указания как содержания ячеек таблицы любых данных, в том числе и таблиц. Тэг <b>caption</b> позволяет
задать название таблицы, которое может находиться внизу (align="bottom") или вверху таблицы
(align="top"). Приведем простую таблицу, показывающую поколения процессоров фирмы Intel:</p>
<h3>Поколения процессоров фирмы Intel</h3>
<table border="1" bgcolor="#FF0000" bordercolor="#0000FF" cellpadding="5">
<caption align="top"><b>Поколения процессоров фирмы Intel</b></caption>
<tr>
<th>Тип - Поколение</th>
<th>Год</th>
<th>Ширина шины данных/адреса</th>
<th>L1-кэш (КБ)</th>
<th>Скорость шины памяти (МГц)</th>
<th>Внутренняя частота (МГц)</th>
</tr>
<tr>
<td>8086 - Первое</td>
<td>1978</td>
<td>16/20 битов</td>
<td>нет</td>
<td>4.77-8</td>
<td>4.77-8</td>
</tr>
<tr>
<td>80286 - Второе</td>
<td>1982</td>
<td>16/24 бита</td>
<td>нет</td>
<td>6-20</td>
<td>6-20</td>
</tr>
<tr>
<td>80386DX - Третье</td> <td>1985</td>
<td>32/32 бита</td>
<td>нет</td>
<td>16-33</td>
<td>16-33</td>
</tr>
<tr>
<td>80486DX - Четвертое</td>
<td>1989</td>
<td>32/32 бита</td>
<td>8</td>
<td>25-50</td>
<td>25-50</td>
</tr>
<tr>
<td>80486DX4 - Четвертое</td>
<td>1994</td>
<td>32/32 бита</td>
<td>8+8</td>
<td>25-40</td>
<td>25-40</td>
</tr>
<tr>
<td>Pentium - Пятое</td>
<td>1993</td>
<td>64/32 бита</td>
<td>8+8</td>
<td>60-66</td>
<td>60-200</td>
</tr>
<tr>
<td>Pentium MMX - Пятое</td>
<td>1997</td>
<td>64/32 бита</td>
<td>16+16</td>
<td>66</td>
<td>166-233</td>
</tr>
<tr>
<td>Pentium Pro - Шестое</td>
<td>1995</td>
<td>64/36 битов</td>
<td>8+8</td>
<td>66</td>
<td>150-200</td>
</tr>
<tr>
<td>Pentium II - Шестое</td>
<td>1997</td>
<td>64/36 битов</td> <td>16+16</td>
<td>66</td>
<td>233-300</td>
</tr>
<tr>
<td>Pentium III - Шестое</td>
<td>1999</td>
<td>64/36 битов</td>
<td>16+16</td>
<td>100/133</td>
<td>450-600</td>
</tr>
<tr>
<td>Pentium 4 - Седьмое</td>
<td>2000</td>
<td>64/36 битов</td>
<td>8+32</td>
<td>400</td>
<td>1400-1500</td>
</tr>
</table>
<h2 align="center">Обтекание текстом таблицы</h2>
<p>На Web-страницах часто встречаются таблицы небольшого размера и желательно, чтобы текст
обтекал таблицу (при центрировании таблицы с ее боков могут оставаться пустые места). Чтобы
текст обтекал таблицу, необходимо "прижать" таблицу влево (left) или вправо (right) с помощью
атрибута align. Отметим, что значение align="left" принимается по умолчанию. Форматируйте
приведенную далее небольшую таблицу с названием "Базовые адреса параллельных портов"
и убедитесь в том, что при выравнивании ее влево или вправо последующий текст обтекает таблицу.</p>
<table border="1" align="left" cellpadding="5">
<caption><b>Базовые адреса параллельных портов</b></caption>
<tr>
<th>Начальный адрес</th>
<th>Функция</th>
</tr>
<tr>
<td>0000:0408</td>
<td>Базовый адрес LPT1</td>
</tr>
<tr>
<td>0000:040A</td>
<td>Базовый адрес LPT2</td>
</tr>
<tr>
<td>0000:040C</td>
<td>Базовый адрес LPT3</td>
</tr>
<tr> <td>0000:040E</td>
<td>Базовый адрес LPT4 (*)</td>
</tr>
</table>
<p>Базовые адреса параллельных портов. Для интерфейса с портом вместо имени часто используется базовый адрес, а не имена LPT1 и
др. Таблица адресов портов находится в области данных BIOS.
Когда BIOS назначает адреса принтерным устройствам, он сохраняет адреса в конкретных ячейках памяти и их там можно найти.
Примечание *: В новых BIOS адрес 0000:040E из области данных BIOS может использоваться
как расширенная область данных BIOS (Extended BIOS Data Area).</p>
<h3 align="center">Мои любимые блюда</h3>
<table border="1" width="100%">
<tr>
<td width="50%">
<b>блины</b>
<ul>
<li>мука</li>
<li>молоко</li>
<li>яйца</li>
<li>соль</li>
</ul>
</td>
<td width="50%">
<b>салат "оливье"</b>
<ul>
<li>картофель</li>
<li>яйца</li>
<li>горошек</li>
<li>соль</li>
<li>курица</li>
<li>майонез</li>
<li>огурец</li>
</ul>
</td>
</tr>
<tr>
<td>
<b>салат "крабовый"</b>
<ul>
<li>крабовые палочки</li>
<li>яйца</li>
<li>кукуруза</li>
<li>соль</li>
<li>рис</li>
<li>майонез</li>
</ul>
</td>
<td> <b>яичница</b>
<ul>
<li>яйца</li>
<li>соль</li>
</ul>
</td>
</tr>
</table>
<h3 align="center">Таблица с графическими ссылками</h3>
<p>Самостоятельно разработать таблицу из двух строк и четырех столбцов, в каждой из ячеек которой находятся изображения. В первой строке находятся изображения ball.gif (100 x 100
пикселов), bear.gif (68 x 97 пикселов), gali.gif (66 x 80 пикселов) и jim.gif (66 x 90
пикселов). Во второй строке находятся изображения kick.gif (80 x 100 пикселов), peng.gif
(40 x 66 пикселов), pirate.gif (54 x 75 пикселов) и swan.gif (70 x 70 пикселов). Все ячейки
таблицы должны иметь размеры 100 x 100 пикселов. Изображения выровнять в ячейках по горизонтали
и вертикали. Все изображения в каждой строке служат ссылками на файлы (справа налево)
page1.htm, page2.htm, page3.htm, page4.htm. При щелчке на ссылке адресуемый документ должен
отображаться в окне новой копии броузера. Таблицу центрировать, фоновый цвет сделать cyan
и убрать рамки изображений первой строки.</p>
<table border="1" align="center" bgcolor="cyan" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" align="center" valign="middle">
<a href="page4.htm" target="_blank"><img src="ПУТЬ ДО ФОТО ball.gif" width="100" height="100" border="0"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page3.htm" target="_blank"><img src="ПУТЬ ДО ФОТО bear.gif" width="68" height="97" border="0"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page2.htm" target="_blank"><img src="ПУТЬ ДО ФОТО gali.gif" width="66" height="80" border="0"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page1.htm" target="_blank"><img src="ПУТЬ ДО ФОТО jim.gif" width="66" height="90" border="0"></a>
</td>
</tr>
<tr>
<td width="100" height="100" align="center" valign="middle">
<a href="page4.htm" target="_blank"><img src="ПУТЬ ДО ФОТО kick.gif" width="80" height="100" border="1"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page3.htm" target="_blank"><img src="ПУТЬ ДО ФОТО peng.gif" width="40" height="66" border="1"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page2.htm" target="_blank"><img src="ПУТЬ ДО ФОТО pirate.gif" width="54" height="75" border="1"></a>
</td>
<td width="100" height="100" align="center" valign="middle">
<a href="page1.htm" target="_blank"><img src="ПУТЬ ДО ФОТО swan.gif" width="70" height="70" border="1"></a>
</td>
</tr></table>
</body>
</html>