Обработка_данных_ОЗО / Лабораторные_работы / Лабораторные работы_HTML / лаб3
.docЛабораторная работа 4. Таблицы и фреймы
Таблица задается командой <TABLE> ... </TABLE>. Внутри этих тэгов задаются строки командами <TR> ... </TR>. Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... </TD>. Таким образом, по строкам, описывается вся структура таблицы.
Рассмотрим следующий пример.
|
Программа |
Таблица на экране |
||||||
|
<TABLE border=1> <TR> <!-- Первая строка --> <TD>(1,1)</TD> <!-- Первая ячейка --> <TD>(1,2)</TD> <!-- Вторая ячейка --> </TR> <TR> <!-- Вторая строка --> <TD>(2,1)</TD> <!-- Первая ячейка --> <TD>(2,2)</TD> <!-- Вторая ячейка --> </TR> <TR> <!-- Третья строка --> <TD>(3,1)</TD> <!-- Первая ячейка --> <TD>(3,2)</TD> <!-- Вторая ячейка --> </TR> </TABLE> |
|
Задание 1. Создайте таблицу умножения. Закрасив четные строки желтым цветом, нечетные синим.
<html>
<table border=1>
<tr bgcolor="blue">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr bgcolor="yellow">
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
……..
</table>
</html>
Продолжите самостоятельно.
Задание 2. Создайте таблицу, изображенную на рисунке:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Задание 3. Создайте следующую таблицу с объединением.
<html>
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
</html>
<html>
<table>
<tr>
<td height="35" bgcolor="#FFCC33"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" > <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</html>
Задание 4. Напишите программу, которая
выводит на экран документ:
Задание 5. Создайте вертикальный фрейм, таким образом, чтобы слева можно было поместить файл-меню, а справа будут размещаться соответствующие файлы, на которые сделаны ссылки.
<html>
<head>
<title>Фреймы </title>
<frameset rows="150,*" border="0">
<frame src="menu.html">
<frame src="content.html" name="window-1">
</frameset>
</head>
</html>
Обратите внимание, что в файле меню необходимо внести следующие изменения.
<html>
<head>
<title>Документ с Меню</title>
<body bgcolor=blue text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="имя файла 1 " target="window-1">Устройства ввода</a>
<a href="имя файла2" target="window-1">Устройства вывода</a>
<a href="имя файла 3" target="window-1">Устройства обработки</a>
……………..
</center>
</body>
</head>
</html>