Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
ЛАБОРАТОРНАЯ РОБОТА № 7
Создание таблиц в HTML-документе
Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Теги оформления таблиц
|
Тег |
Форма записи |
Примечание |
|
TABLE |
<TABLE>текст</TABLE> |
Объявление таблиц. |
|
TR |
<TR>текст</TR> |
Объявление строки. |
|
TD |
<TD>текст</TD> |
Объявление ячейки в строке. |
Атрибуты тега <TABLE>
|
Атрибут |
Форма записи |
Примечание |
|
BORDER |
<TABLE BORDER=X> |
Задает рамку вокруг таблицы. |
|
WIDTH |
<TABLE WIDTH=XX%> |
Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов. |
|
BGCOLOR |
<TABLE BGCOLOR="#RRGGBB"> |
Задает цвет фона таблицы. |
Атрибуты тегов <TD> и <TR>
|
Атрибут |
Форма записи |
Примечание |
|
ALIGN |
<TD ALIGN=X> |
Устанавливает выравнивание по горизонтали (Right, Left, Center) |
|
VALIGN |
<TD VALIGN=X> |
Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) |
|
BGCOLOR |
<TD BGCOLOR= "#RRGGBB"> |
Задает цвет фона ячейки. |
Еще один тег для оформления ячеек таблиц — тег <TH>...</TH> — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.
Если нужно задать заголовок всей таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:
ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.
2. Ход работы
Создание простой таблицы.
<html>
<body>
<table border=2>
<tr><td>Мама</td></tr>
<tr><td>Папа</td></tr>
<tr><td>Сын</td></tr>
</table>
</body>
</html>
3. Задание на самостоятельное выполнение
<HTML>
<HEAD>
<TITLE> Ф.И.О. </TITLE>
</HEAD>
<TITLE> Расписание занятий I курса</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="ARIAL"><B> V курс </B></FONT><BR>
</P>
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B> Понедельник </B></FONT><BR>
<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">
<TR BGCOLOR="CCCCFF" ALIGN=CENTER>
<TD>Пара</TD> <TD>3-8581</TD> <TD>3-8582</TD> <TD>3-8583</TD>
</TR>
<TD>1</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Тхн. проект-ия СП</TD>
</TR>
<TR>
<TD>2</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD>
</TR>
<TR>
<TD>3</TD> <TD>Тхн. проект-ия СП</TD> <TD>Тхн. проект-ия СП</TD> <TD>Мировые инф. рес-сы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
4. Содержание отчета
1. Выполнить все описанные операции с текстом, содержащим личную информацию (Ф.И.О., номер зачетной книжки и т.д.)
2. Представить HTML-коды выполненных операций.
3. Представить скрины готовых HTML-документов.
4. При сдаче работы иметь исходные файлы.
5. Задания и вопросы для аттестации
1. Уметь показать способ создания HTML-таблиц.
2. Знать принципы формирования HTML- таблиц.
3. Знать основные теги.
Ф.И.О.
Ф.И.О., группа
№_зачетки