- •Базовые тэги html. Создание простейшего сайта
- •Между этими строками внесите теги:
- •2. Самостоятельная работа
- •Лабораторная работа № 2 Форматирование текста: физическое и логическое
- •2. Самостоятельная работа
- •Лабораторная работа № 3 Использование объектов
- •2. Самостоятельная работа
- •Лабораторная работа № 4 Работа с графикой
- •Лабораторная работа № 5 Работа с таблицами
- •2. Самостоятельная работа
- •Лабораторная работа № 6 Фреймы и формы
- •2. Самостоятельная работа
- •2. Самостоятельная работа
- •Лабораторная работа № 7 Каскадные таблицы стилей
- •Параметры линии:
- •Способы подключения стилей к web-странице
- •2. Самостоятельная работа и содержание отчета
- •Лабораторная работа № 8 Свойства элементов
- •Изучаем Html
- •Лабораторная работа № 9 Навигационные карты. Map. Как сделать часть картинки ссылкой Цель: Изучить тэг Map, тэг Area,
- •Лабораторная работа № 11 Ссылка внутри документа, якоря, anchor. Цель: изучить атрибуты name, id.
Лабораторная работа № 5 Работа с таблицами
Цель: освоить теги html, синтаксис языка
Результат обучения: Студент должен научиться создавать в Web-страницах таблицы разных стилей
Ход работы
Для создания таблиц в HTML применяется тег <TABLE>, синтаксис записи которого в общем виде следующий:
<TABLE ALIGN = «значение» WIDTH= «значение» BORDER = «целое число»
CELLSPACING= «целое число» CELLPADDING= «целое число»>
<TR ALIGN= «значение» VALIGN= «значение»>
<TD ALIGN= «значение» VALIGN= «значение» COLSPAN= «целое число» ROWSPAN= «целое число» HEIGHT= «целое число» NOWRAP> Содержимое ячеек </TD>
</TR>
</TABLE>
Основные теги для создания таблиц:
TABLE |
Создает таблицу |
CAPTION |
Задает заголовок таблицы |
TR |
Создает новый ряд (строку) ячеек таблицы |
TD и TH |
Создает ячейку с данными в текущей строке |
Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала, с помощью тега TR необходимо создать строку таблицы, в которую затем тегом TD помещаются ячейки.
Атрибуты для тега <TABLE>:
ALIGN – задает горизонтальное позиционирование всей таблицы в целом, может принимать значения LEFT, RIGHT, CENTER
BORDER – указывает на толщину обрамления столбцов и ячеек таблицы в пикселах, т.е. наличие или отсутствие (при значении 0) сетки таблицы.
WIDTH – задаёт ширину всей таблицы и может принимать значение целого числа, если ширина указывается в пикселах, либо числа от 1 до 100 с символом %, если ширина задается в процентах от ширины экрана пользователя.
CELLSPACING – задает расстояние в пикселах между ячейками
CELLPADDING – задает расстояние в пикселах между границей ячейки и её содержимым
Атрибуты для тега <TD>
ALIGN – горизонтальное позиционирование содержимого в ячейке (допустимые значения Center, left, right)
VALIGN – вертикальное позиционирование содержимого ячейки (допустимые значения Top, middle, bottom, baseline) COLSPAN – число столбцов, перекрываемых ячейкой (объединяет N ячеек по горизонтали)
ROWSPAN – число строк, перекрываемых ячейкой (объединяет N ячеек по вертикали)
HEIGHT – задаёт высоту ячейки в пикселах
NOWRAP – запрет переноса слов внутри ячейки
Простая таблица
Создайте в блокноте Html – файл, сохраните его под именем table.htm. Между тегами <Body> и </Body> внесите команды:
<TABLE BORDER="1">
<TR>
<TD>Инженерный факультет</TD>
</TR>
<TR>
<TD>ИСИ</TD> <TD>ИСЭ</TD> <TD>ОРПИ</TD>
</TR>
</TABLE>
сравните результат:
-
Инженерный факультет
ИСИ
ИСЭ
ОРПИ
Мы указали в первой строке таблицы создать только одну ячейку. При построении следующей строки браузер первую ячейку создал точно такую же, как и в первой строке. Чтобы указать, что первая строка является заголовком всей таблицы, в тег <TD>, нужно внести атрибуты:
colspan="3" align="Center"
Теперь таблица должна принять вид:
Инженерный факультет |
||
ИСИ |
ИСЭ |
ОРПИ |
Таблица с параллельными текстами
Иногда web-мастеру приходится представлять на странице текст в виде нескольких разделенных небольшим расстоянием колонок. В подобных ситуациях рекомендуется использовать невидимые таблицы, в которых для каждого отрывка текста отводится отдельная строка. При подобном представлении информация гарантирована от искажений в браузерах разных версий и при разном экранном разрешении пользовательского монитора. Примером реализации такой таблицы может служить следующий отрывок кода HTML:
< TABLE BORDER="0" CELLSPACING =”3”>
<CAPTION> <STRONG> Отрывки из Книги Бытия на трех языках </STRONG></CAPTION>
<TR ALIGN =”LEFT” VALIGN=”TOP”>
<TH WIDTH=”11”> </TH>
<TH WIDTH=”223”> Латынь </TH>
<TH WIDTH=”271”> Английский </TH>
<TH WIDTH=”240”> Русский </TH>
</TR>
<TR ALIGN =”LEFT” VALIGN=”TOP”>
<TH WIDTH=”11”> 1 </TH>
<TD WIDTH=”223”> In principio creavit Deus caelum et terram. </TD>
<TD WIDTH=”271”> In the beginning God created the heaven and the earth. </TD>
<TD WIDTH=”240”> <EM>В начале сотворил Бог Небо и Землю. </EM></TD>
</TR>
<TR ALIGN =”LEFT” VALIGN=”TOP”>
<TH WIDTH=”11”> 2 </TH>
<TD WIDTH=”223”> Terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas. </TD>
<TD WIDTH=”271”> And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. </TD>
<TD WIDTH=”240”> <EM>Земля же была безвидна и пуста, и Тьма – над Бездною; и Дух Божий носился над Водою.</EM> </TD>
</TR>
<TR ALIGN =”LEFT” VALIGN=”TOP”>
<TH WIDTH=”11”> 3 </TH>
<TD WIDTH=”223”> Dixitque Deus " Fiat lux" et facta est lux. </TD>
<TD WIDTH=”271”> And God said, Let there be light; and there was light. </TD>
<TD WIDTH=”240”> <EM>И сказал Бог: " Да будет Свет! " - и стал Свет. </EM></TD>
</TR>
</TABLE>
Сохраните файл под именем «O_Book». Запустите и просмотрите результат. Обратите внимание, что в данном примере была использована директива <caption>, которая позволяет задать заголовок таблице в целом. Синтаксис ее записи в общем виде следующий:
<CAPTION ALIGN=”значение”> Текст заголовка </CAPTION >
Заголовок таблицы всегда позиционируется относительно ее центра, поэтому в качестве значения атрибута ALIGN в данном случае может быть указан параметр TOP или BOTTOM, с помощью которого Вы можете разместить заголовок либо над таблицей, либо под ней.
А также, был использован тег <TH>, центрирующий (по умолчанию) и выделяющий заголовок столбца (строки) жирным шрифтом. Данный тег имеет такие же атрибута, что и тег <TD>.
Пример создания таблицы, элементы которой занимают несколько строк или столбцов
Иногда в документе необходимо представить таблицу, некоторые ячейки которой занимают несколько строк или столбцов по вертикали или горизонтали. Для этого используются атрибуты COLSPAN или ROWSPAN. В качестве примера построим в окне Web-страницы следующую таблицу:
Заголовок таблицы |
||
ячейка 1 |
ячейка 2 |
ячейка 3 |
объединенная ячейка |
ячейка 2 |
ячейка 3 |
ячейка 2 |
ячейка 3 |
|
Создадим первую строку таблицы:
<TABLE BORDER="1"width="250">
<TR>
<TН colspan="3" align="Center">Заголовок таблицы</TН>
</TR>
построим вторую строку таблицы:
<TR>
<TD valign="top"><EM>ячейка 1</EM></TD> <TD>ячейка 2</TD> <TD>ячейка 3</TD>
</TR>
построим третью строку, причём укажем, что первая ячейка этой строки объединяется с ячейкой под ней:
<TR>
<TD rowspan="2"><EM>объединенная ячейка</EM> </TD><TD>ячейка 2 </TD> <TD>ячейка 3</TD>
</TR>
построим четвёртую строку таблицы и закроем тег таблицы:
<TR>
<TD>ячейка 2</TD> <TD>ячейка 3</TD>
</TR>
</TABLE>
Обратите внимание, что здесь указаны только две ячейки, т.к. первая ячейка уже указана при построении третьей строки.
Сохраните документ под именем “S_table” и проверьте результат.
Вложенные таблицы
Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка используется для представления на web-страницах так называемых «вложенных» таблиц, пример описания которых приведен ниже:
<TABLE BORDER="1" CELLPADDING =”6” WIDTH=”600”>
<CAPTION> <STRONG> Спряжение стандартного глагола <EM>to invite: </EM> </STRONG> </CAPTION>
<TR>
<TH WIDTH=”200”>Перевод </TH>
<TH WIDTH=”200”> Future </TH>
<TH WIDTH=”200”> Future-in-the-Past </TH>
</TR>
<TR>
<TD COLSPAN=”3” WIDTH=”588”>
<TABLE BORDER="1" CELLPADDING =”0” CELLSPACING=”0” WIDTH=”587”>
<TR>
<TD WIDTH=”194”> Я (мы) приглашу (-сим) </TD>
<TD WIDTH=”194”> I (we) shall invite </TD>
<TD WIDTH=”194”> I (we) should invite </TD>
</TR>
<TR>
<TD WIDTH=”194”> Он (Вы, они) пригласит (-ите, -ят) </TD>
<TD WIDTH=”194”> He (you, they) will invite </TD>
<TD WIDTH=”194”> He (you, they) would invite </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Сохраните файл под именем «V_table» и запустите для просмотра результата.