Часть 3. Создание таблиц в HTML-документе.

Создание таблиц в HTML-документе.

Цель работы: Научиться создавать и редактировать таблицы в терминах языка 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) части таблицы.

Ход работы:

Создание простой таблицы.

  1. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
<html> <body><table border=2><tr><td>Мама</td></tr><tr><td>Папа</td></tr><tr><td>Сын</td></tr></table></body></html>
  1. Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.
  2. Вставьте в тег <table> следующие атрибуты: width=50% align="center" bgcolor="yellow" bordercolor="blue". Просмотрите обновленный документ в браузере.
  3. Добавьте в тег <table> атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.
  4. Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.
  5. Добавьте между второй парой тегов <tr>:</tr> теги <td> дядя </td> <td>дедушка</td> Просмотрите полученный документ в окне браузера.
  6. Добавьте между третьей парой тегов <tr>:</tr> теги <td> дочь </td> <td>внучка</td> Просмотрите обновленный документ в браузере.
  7. Добавьте в первой паре тегов <tr>:</tr> в теге <td> атрибут colspan=3. Просмотрите полученный документ в окне браузера.
  8. Добавьте в первой паре тегов <tr>:</tr> в теге <td> еще атрибут align="center" Просмотрите полученный документ в окне браузера.
  9. Добавьте во второй паре тегов <tr>:</tr> в первом теге <td> атрибут rowspan=2 Просмотрите полученный документ в окне браузера.
  10. Удалите из второй пары тегов <tr>:</tr> тег <td>внучка</td> Просмотрите полученный документ в окне браузера.

Задание на самостоятельное выполнение.

  1. Создайте страницу, содержащую расписание Вашей учебной группы. HTML-код должен выглядеть примерно так:
<HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><TITLE> Расписание занятий V курса</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>2. <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>
  1. Сохраните файл под именем schedule_monday.html.
  2. Используя различные варианты оформления таблиц, создайте файлы с именами schedule_tuesday.html и schedule_wednesday.html, содержащие расписание на вторник и среду, соответственно.
  3. В файле schedule_friday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране — центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки — голубой. Цвет всей таблицы — зеленый. Расположение текста в ячейках — по центру.
  2. В файле schedule_sunday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.
  2. В файле schedule_thursday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.

 








Дата добавления: 2015-02-10; просмотров: 1596;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.005 сек.