HTML. Создание таблиц

Цель работы: изучение дескрипторов форматирования таблиц и приобретение умения задания параметров обтекания таблицы текстом, слияния ячеек таблицы, расположения и вида внутренних границ таблицы.

Таблица — весьма удобное средство выравнивания текста и графики на всей странице. Язык HTML предлагает для этого несколько специальных
дескрипторов.

Графический фон таблицы. Атрибут BACKGROUND позволяет снабдить графическим фоном отдельную ячейку таблицы или всю ее целиком (см. пример в лабораторной работе №10). Ячейка с графическим фоном сразу привлекает к себе внимание - это удобный способ выделения важной информации. Если расположить графическое изображение на фоне целой таблицы, легко добиться любопытных эффектов.

Убедитесь, что примененное в качестве фона графическое изображение не ухудшает возможностей восприятия информации. Следует также обратить внимание на то, чтобы изображение обладало подходящим форматом. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, Web-броузер обрежет изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта. Намереваясь использовать графическое изображение в качестве фона целой таблицы, имейте в
виду, что Web-броузеры могут интерпретировать
подобную информацию совершенно по-разному.
Так, например, Microsoft Internet Explorer попробует создать многочисленные копии изображения
и расположить их таким образом, чтобы заполнить пространство таблицы, а Netscape Navigator
предпримет попытку размножить изображение в
каждой ячейке таблицы. Хотя атрибут BACKGROUND поддерживается большинством Web-броузеров, он не входит в стандарт HTML.

Щелкните в пределах текста дескриптора,
определяющего ячейку
таблицы (< ТН> или < TD>)
либо целую таблицу
(< TABLE>), которые следует снабдить графическим фоном.

Введите BACKGROUND="? " и замените “? ” строкой, содержащей наименование графического файла и путь доступа к нему.

Примечание: сведения о приемах задания имени
и местоположения файла были приведены в предыдущих лабораторных работах.

Web-броузер отображает таблицу с фоном,
в качестве которого ис-
пользуется заданное
вами графическое изображение (см. рис. 10.2.).

Выравнивание данных в таблице. Атрибуты ALIGN и VALIGN позволяют устанавливать признаки горизонтального и вертикального выравнивания данных в таблице.

Атрибут ALIGN предназначен для задания параметра выравнивания по горизонтали. По умолчанию Web-броузер содержимое ячеек заголовков (описываемых дескрипторами < ТН>) выравнивает по центру, а ячеек
данных (< TD>) — влево. Атрибут VALIGN обеспечивает возможность выравнивания данных по вертикали. По умолчанию данные отображаются броузерами посередине ячейки. Web-броузер предоставляет средства выравнивания данных в отдельной ячейке (описываемой дескрипторами < TH> или < TD>), строке (< TR>), группе столбцов (< COLGROUP> или < COL>) либо группе строк (< TBEAD>, < TBODY> или < TFOOT>). Информация о группах столбцов и строк в предыдущей лабораторной работе №10.

Если вы ограничите расстояние между содержимым ячейки и ее кромками специальным атрибутом (CELLPADDING), он окажет влияние на результат выравнивания. Например, при присваивании атрибуту CELLPADDING значения, равного 4, и
задании признака выравнивания top (кверху)
данные будут размещены на расстоянии 4 пикселей от верхней границы ячейки. Более подробные сведения о признаках выравнивания данных в ячейке приведены ниже:

- щелкните в пределах текста дескриптора, определяющего ячейку таблицы (< TH> или < TD>), ее строку (< TR>), группу столбцов (< COLGROUP> или < COL>) либо группу строк (< THEAD>, < TBODY> или < TFOOT>),
которые содержат данные, подлежащие выравниванию по горизонтали;
- введите ALIGN="? " и замените “? ” одним из обозначений типа выравнивания — left (влево), right (вправо) либо
center (по центру).

Web-броузер отображает ячейку таблицы, ее строку, группу столбцов или строк, выравнивая данные в соответствии с указанным вами правилом. Однажды определив признаки выравнивания данных для строки, группы столбцов
или строк таблицы, позже вы сможете задать другие параметры выравнивания для отдельных ячеек. Атрибуты выравнивания данных
в ячейках обладают более высоким приоритетом.

Пример:
< TR ALIGN=" right" > < ТР> Этот текст будет выровнен вправо.< /TD>
< TD ALIGN=" center" Этот фрагмент выравнивается по центру.< /TD>

< TD> Этот текст будет выровнен вправо.< /TD>
< /TR>

Предопределенная константа baseline позволяет указать на то, чтобы данные выравнивались по
вертикали, относительно нижней кромки пер-
вой строки текста в других ячейках. Значение
baseline поддерживается только Web-броузе-
ром Netscape Navigator.

Пример:
< TD VALIGN=" baseline" > Мне хочется выровнять эти данные.< /ТD>
Стандарт HTML предусматривает специальное значение justify, позволяющее выровнять дан-
ные по ширине относительно левой и правой
границ ячейки таблицы. Большинством броу-
зеров эта константа пока не поддерживается.

Пример:
< TR ALIGN=" justify" >
Стандарт HTML также предлагает возможность взаимного выравнивания определенных
символов в ячейках таблицы, обеспечиваемую
значением char и атрибутом CHAR. Введите
ALIGN=" char" CHAR="? ", заменяя "? " симво-
лом, определяющим порядок выравнивания.
Большинством броузеров эти средства пока
не поддерживаются.

Пример:
< TR ALIGN=" char" CHAR="." >

Щелкните в пределах текста дескриптора, определяющего ячейку таблицы (< TH> или < TD>),
ее строку (< TR>), группу
столбцов (< COLGROUP> или < СОL>) либо группу строк (< THEAD>, < TBODY> или < TFOOT>), которые
содержат данные, подлежащие выравниванию
по вертикали.

Введите VALIGN="? " и замените "? " одним из обозначений типа выравнивания -
top (кверху), middle (посередине) или bottom (книзу).Так Web-броузер отображает ячейку таблицы, ее строку, группу столбцов или строк, выравнивая данные в соответствии с указанным вами
правилом.

Изменение размеров таблицы. Изменяя размеры таблицы, вы сможете точно разместить ее в ограниченном свободном пространстве Web-страницы. Атрибут WIDTH позволяет указать новое значение ширины таблицы в экранных пикселях или процентах относительно текущих габаритов окна
Web-броузера. Задавая значение в пикселях, ограничьте его величиной 600 или менее — так вы сможете гарантировать, что таблица уместится в окне броузера при любом разрешении монитора персонального компьютера пользователя. Если вы хотите, чтобы ширина таблицы
гибко изменялась в зависимости от размеров окна броузера, укажите значение, выраженное в процентах.

Атрибут HEIGHT дает возможность заменить высоту таблицы новым значением, выраженным в
пикселях либо процентах относительно текущих
габаритов окна броузера. Атрибут HEIGHT дескриптора < TABLE> не входит в стандарт HTML и по-
этому Рис. 11-1. Применение атрибутов CELLSPACING и CELLPADDING.

поддерживается далеко не всеми Web-бро-
узерами.

Если задать чрезмерно малые значения ширины
или высоты таблицы, при которых становится не-
возможным нормальное воспроизведение ее содержимого, броузер определит минимальные значения, позволяющие отобразить данные в приемлемом виде. Атрибут HEIGHT и WIDTH позволяют также изменять размеры отдельной ячейки, если употребить их с дескриптором < TH> или < TD>

Ход работы:

1. Ознакомьтесь с данной инструкцией, вызовите броузер WEB щелчком «мыши» по иконке, откройте в нем «пустую» страницу. Откройте ее в виде HTML.

2. Наберите в открывшемся блокноте код примера, показанный в лабораторной работе №10 рисунок 10.2., внесите ниже приведенные изменения в дескриптор TABLE.

< html>

< TITLE> Моя первая таблица в HTML< /TITLE> <! --тег названия страницы-->

< head>

< I> < B> ПРОБА - ШАБЛОН< /B> < /I> <! --тег заголовков страницы-->

< /head>

< BODY>

< H5> & #169; 2005-09-08 Иванов Николай< /H5> < P Align=" RIGHT" >

< font size=" 3" face=" MS Sans Serif" > < strong> Таблица№1< /strong> < /font>

< Table border=" 4" CELLSPACING=" 10" CELLPADDING=" 5" bordercolor=" green" BACKGROUND=" C: \WINDOWS\Сиреневый пух.bmp" >

<! --в тег можно вставить графический фон всей таблицы, например, взять графику по адресу www.nepthys.com/textures и www.imagine.metanet.com-->

< CAPTION> < hl> < font size=" 3" face=" MS Sans Serif" > < strong> Основные элементы DFD диаграмм< /strong>

< /font> < /CAPTION> <! --Выравнивание данных в ячейках оставлено по умолчанию-->

< COLGROUP>

< COL SPAN=”1”>

< COL SPAN=”1”>

< COL SPAN=”1”>

< THEAD>

< TR> <! --тег строки заголовков таблицы-->

< TH> Элемент< /TH>

< TH> Описание< /TH>

< TH> Обозначение< /TH>

< /TR>

< /THEAD>

< TBODY>

< TR> <! --тег строки данных таблицы-->

< TD> Внешняя сущность< /TD>

< TD> Материальный объект или физическое лицо, представляющее собой источник или приемник информации< /TD>

< TD> Имя внешнего объекта< /TD>

< /TR>

< /TBODY>

< TBODY>

< TR>

< TD> Функция/процесс< /TD>

< TD> Действие, выполняемое моделируемой системой/процесс преобразования входных потоков данных в выходные

в соответствии с определенным алгоритмом (обработки данных)< /TD>

< TD> Имя функции/процесса< /TD>

< /TR>

< /TBODY>

< TBODY>

< TR>

< TD> Поток данных< /TD>

< TD> Объект, над которым выполняется действие, может быть информационным (логическим) или управляющим.

(Управляющие потоки обозначаются пунктирной линией со стрелкой) < /TD>

< TD> Имя объекта< /TD>

< /TR>

< /TBODY>

< TBODY>

< TR>

< TD> Хранилище данных< /TD>

< TD> Абстрактное устройство для хранения информации, которую можно в любой момент поместить в накопитель и

через некоторое время извлечь,

причем способы помещения и извлечения могут быть любыми< /TD>

< TD> Имя объекта< /TD>

< /TBODY>

< TFOOT> <! --тег итоговой строки таблицы-->

< TD COLSPAN=" 3" ALIGN=" CENTER" > Примерный перечень элементов для построения потоков данных< /TD>

< /TFOOT> <! -- Атрибут COLSPAN=" 3" ячейки TFOOT позволил слить столбцы в строке для того, чтобы то же самое сделать по столбцу применяют атрибут ROWSPAN=" 3" -->

< /TR>

< /Table>

< BR>

< HR NOSHADE BGCOLOR=" red" SIZE=" 3" >

< /body>

< /html>

Сохраните изменения в меню «файл → сохранить» и обновите страницу.

3. Затем в меню «обновить» откройте вновь созданный файл (ранее Вы его создали в шаблоне к лабораторной работе №10 «Калоев HTML. Лаб. 10»).

4. Внесите в него приведенные выше в примерах дескрипторы и атрибуты (см. текст выше - пункты выравнивание данных и изменение размеров) атрибуты HEIGHT, ALIGN=" char" CHAR=".", ALIGN=" center", в графическом редакторе Блокнот.

5. Документ, сохраните в меню «файл → сохранить» и вновь обновите страницу.

6. Сохраните набранный текст под тем же расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы» под названием включающем Вашу фамилию, например: Калоев HTML. Лаб. 11).

7. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранную таблицу «Моя первая таблица в HTML ».

8. Студенту предлагается проанализировать набранный код фрагмента программы, поэкспериментировать, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу).

9. Оформить лабораторную работу (преподавателю сдавать лабораторную работу в электронном виде, допускается распечатка страницы на принтере).

Внимание: При составлении записей в колонках следует стараться, чтобы записи по структуре были как можнопохожими.

Задачи для самостоятельного решения.

Самостоятельно измените дескриптор < Bordercolor> этого примера.

Измените толщину рамки таблицы.

Измените в контейнере < TH > структуру записи таким образом, чтобы оно выглядело курсивом.

Создайте собственную запись с четырьмя колонками. Вставьте приведенное четверостишье во вторую ячейку таблицы.

Измените атрибут ALIGN, чтобы посмотреть изменение написания шрифта, например на Center.

Контрольные вопросы.

Какие тэги вы применили в выше приведенном фрагменте?

Как в HTML подбирать размер ячейки?

В HTML можно опустить некоторые закрывающие дескрипторы, можно ли опустить закрывающий дескриптор < /Table>?

В каком порядке располагаются атрибуты дескриптора < TD>?