Лабораторно-практическая работа

Лабораторно-практическая работа

Тема: «Таблицы»

Цель работы: Научиться создавать таблицы при помощи тэга <table></table>.
Задачи работы:

1. Овладеть методикой работы по созданию таблиц.

2. Получить навыки работы с командой <Table></Table>, атрибутами <tr></tr>,<td></td>

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab6.html на диске.

Технология работы:

Теоретическая часть:

Тег <table> может включать следующие аттрибуты:

width="n"	Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
border="n"	Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
bordercolor="#FFFFFF"	Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета.
bgcolor="#FFFFFF"	Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число.
background="image.gif"	Заполняет фон таблицы изображением.
cellspacing="n"	Определяет расстояние между рамками ячеек таблицы в пикселях.
cellpadding="n"	Определяет расстояние в пикселях между рамкой ячейки и текстом.
align=" **** "	Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
frame="значение"	Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID - окантовки нет (значение по умолчанию). AbOVE - только граница сверху. bELOW - только граница снизу. HSIDES - границы сверху и снизу. VSIDES - только границы слева и справа. LHS - только левая граница. RHS - только правая граница. bOX - рисуются все четыре стороны. bORDER - также все четыре стороны.
rules="n"	Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): NONE - нет линий (значение по умолчанию). GROUPS - линии будут только между группами рядов. ROWS - только между рядами. COLS - только между колонками. ALL - между всеми рядами и колонками.

Таблица может включать заголовок, который распологается между тегами <CAPTION></CAPTION>. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок над таблицей слева.
RIGHT - заголовок над таблицей справа.
bOTTOM - заголовок под таблицей по центру.

Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <tr> и завершаются закрывающимся </tr>, а каждая ячейка таблицы начинается тегом <td> и завершается </td>. Данные теги могут иметь такие аттрибуты:

Следующие атрибуты могут применятся для строк и ячейек.
align=" **** "	Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
valign="CENTER"	Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), bOTTOM (по нижнему краю).
bgcolor="#FFFFFF"	Устанавливает цвет фона строки или ячейки.
background="image.gif"	Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
width="n"	Определяет ширину ячейки в n пикселях.
height="n"	Определяет высоту ячейки в n пикселях.
colspan="n"	Растягивание ячейки по горизонтали. Например, <td COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
rowspan="n"	Растягивание ячейки по строке. Например, <td ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
nowrap	Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку
background="image.gif"	Заполняет фон ячейки изображением.

Кроме этого, любая ячейка таблицы может быть определена не тегами <td></td>, а тегами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт (<b>, <I>, <font SIZE="n", font COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.

При создании сайтов таблицы используются очень часто. Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

Зададим таблицу состоящую из двух строк и трех столбцов (ячеек). Для наглядности ячейки таблицы выделены разными цветами. Границы таблицы не заданы, поэтому вы их не видите
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Заполните получившийся каркас цифрами:
<table>
<tr>
<td> 1x1 </td>
<td> 1x2 </td>
<td> 1x3 </td>
</tr>
<tr>
<td> 2x1 </td>
<td> 2x2 </td>
<td> 2x3 </td>
</tr>
</table>
Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Задаем фон для каждого столбца. В параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <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>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
Параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)).

Используем параметр colspan=2, прописав его для ячейки 1х1. Код следующий:
<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>

Попробуйте сами написать код для такой таблицы (у вас должна исчезнуть ячейка 2х3). Для закрепления напишите код для таблицы:

Можно избавиться от пространства между ячейками таблицы.
Это достигается с помощью атрибута cellspacing, равного нулю:
<table cellspacing=0 >
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <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>
</tr>
</table>
Можно увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign

<table cellpadding=5 >
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top" > <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top" > <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom" > <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom" > <center>2x2</center> </td>
</tr>
</table>
Выполните на компьютере:
Задание 1

1. Создайте файл lab26.html оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 2».

2. Практическая №2- заголовок (по центру и соответствующим шрифтом).

3. Набрать текст та посмотреть результат

4. Создайте таблицы согласно заданию. Задать фон ячейкам желтый, зеленый, согласно рисунку:

1)	2)

1. Создать таблицу из трех строк и четырех столбцов, ширина таблицы составляет 60% от ширины экрана.

2. Ширина левого столбца составляет 30% от ширины таблицы.

3. Задать цвет фона для элементов таблицы, установить цвет рамки.

4. Создать общий заголовок: Работа с таблицами (по центру и соответствующим шрифтом);

Сохранить файл как lab6.txt в блокноте и как lab6.html для просмотра в браузере.
Задание 2
Создать документ, в котором в заголовке окна браузера должна быть надпись " ЛПР №2". С использованием команд создания таблицы сформировать таблицу «Расписание занятий» та «Расписание звонков»

Задание 3

Создать таблицы

10. Сохранить файл как lab6-2.txt в блокноте и как lab6-2.html для просмотра в браузере.

Вопроси:

1. Описать используемые теги на ЛПР

2. Назвать теги создания списка

3. Описать теги форматирования

Дата добавления: 2015-08-29