Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет приборостроения и информатики

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Комолова.doc

Скачиваний:

Добавлен:

27.08.2019

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 89 / 219 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

Iab (Internet Advisory Board) - координационный совет Интернета

</body></html>

Пример списка с нумерацией из строчных латинских букв и начальным значени-

ем e показан на рис 7 4 (листинг 7 4)

Рис 7 4 Список с нумерацией из строчных латинских букв

Листинг 7 4 Пример создания списка с нумерацией из строчных латинских букв

<body bgcolor=khaki>КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ WEB

Этап, предшествующий разработке

<li>Получение заказа на выполнение проекта

<li>Работа с заказчиком

<li>Взаимодействие с представителем заказчика

<li>Мозговой штурм

<li>Определение предполагаемой аудитории

<li>Определение масштаба Web-узла

<li>Анализ информации, представленной конкурентами

<li>Бюджет и время выполнения проекта

<li>Переговоры и подписание договора

</ol>

_____________________________________________________________ <br>

ISOC (Internet Society) - неправительственная некоммерческая организация, <br>

специально созданная для поддержки и развития Интернета

</body></html>

Пример списка с нумерацией из маленьких римских цифр и начальным значени-

ем iii показан на рис 7 5 (листинг 7 5) 110 Урок 7. Списки

Рис 7 5 Список с нумерацией из маленьких римских цифр

Листинг 7 5 Пример создания списка с нумерацией из маленьких римских цифр

<html><head><title>СПИСОК С НУМЕРАЦИЕЙ ИЗ МАЛЕНЬКИХ РИМСКИХ ЦИФР</title></head>

<body bgcolor=honeydew>Участники разработки веб-страницы

<li> Веб-дизайнер

<li> Главный конструктор

<li> Веб-мастер

<li> Аудиодизайнер

<li> Видеодизайнер

<li> Аниматор

<li> Программист

<li> Авторы текстов

<li> Специалист, оценивающий применимость узла

<li> Руководитель проекта</ol>

_____________________________________________________________ <br>

Ietf - международная организация, в которую входят специалисты по сетевым технологиям

</body></html>

Пример списка с нумерацией из арабских цифр и начальным значением 11 пока-

зан на рис 7 6 (листинг 7 6)

Листинг 7 6 Пример создания списка с нумерацией из арабских цифр и начальным

значением 11

<html><head><title>ЯЗЫКИ РАЗМЕТКИ</title></head>

<body bgcolor=moccasin>Языки разметки веб-страницы<br>

_____________________________________________________________ <br>

<li> HTML (Hyper Text Markup Language)

<li> SGML (Standard Generalized Markup Language)

<li> XML Виды списков 111

<li> XHTML

<li> Dynamic HTML</ol>

__________________________________________________________<br>

Mozilla - рабочая группа в составе Netscape

</body></html>

Рис 7 6 Список с нумерацией из арабских цифр и начальным значением 11

Маркированные списки

Маркированные списки создаются с помощью парного тега <UL> (от англ

Unordered List — ненумерованный список) Каждый элемент списка начинается с

тега <LI> (от англ List Item — элемент списка) Тег <UL> может иметь атрибут TYPE:

Атрибут TYPE определяет внешний вид маркера Доступные значения:

disc — закрашенные круглые маркеры (вариант, заданный по умолчанию);

circle — незакрашенные круглые маркеры;

square — квадратные маркеры

Пример маркированного списка с параметрами, заданными по умолчанию, пока-

зан на рис 7 7 (листинг 7 7)

Листинг 7 7 Пример создания маркированного списка с параметрами, заданными

по умолчанию

<html><head><title>ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА</title></head>

<body bgcolor=snow>Инструментальные средства<br>

____________________________________________________________ <br>

<ul>112 Урок 7. Списки

<li>HTML-редакторы

<li>WYSIWYG-редакторы

<li>Adobe GoLive

<li>Microsoft FrontPage

<li>Macromedia Dreamweaver

</ul>____________________________________________________________<br>

Java - язык программирования<br>

JavaScript - интерпретируемый язык, предназначенный для написания сценариев

</body></html>

Рис 7 7 Маркированный список с параметрами, заданными по умолчанию

Пример списка с маркерами в виде квадратов показан на рис 7 8 (листинг 7 8)

Листинг 7 8 Пример создания списка с маркерами в виде квадратов

<html><head><title>ЭЛЕМЕНТЫ ДИЗАЙНА</title></head>

<body bgcolor=paleturquoise>Элементы дизайна<br>

____________________________________________________________ <br>

<li>Пространство

<li>Формат

<li>Фрагмент

<li>Основа

<li>Линия

<li>Форма

<li>Фигура<li>Текстура

<li>Цвет

</ul>

____________________________________________________________<br>

Дизайн - это организация визуальной информации

</body></html> Виды списков 113

Рис 7 8 Список с маркерами в виде квадратов

Пример списка с незакрашенными круглыми маркерами показан на рис 7 9

(листинг 7 9)

Рис 7 9 Список с незакрашенными круглыми маркерами114 Урок 7. Списки

Листинг 7 9 Пример создания списка с незакрашенными круглыми маркерами

<html><head><title>ПРИНЦИПЫ ВЕБ-ДИЗАЙНА</title></head>

<body bgcolor=palegoldenrod>Принципы веб-дизайна<br>

____________________________________________________________ <br>

<li>Элементы дизайна

<li>Удобство восприятия

<li>Согласованность

<li>Единство стиля

<li>Контрасты

<li>Простота

<li>Наличие структуры

<li>Акценты </ul>

____________________________________________________________ <br>

Дизайнер должен предвидеть, как будет воспринята информация пользователем

</body></html>

Вложенные списки

Примеры вложенных списков показаны на рис 7 10 (листинг 7 10) и 7 11 (лис-

тинг 7 11)

Рис 7 10 Вложенные списки

Листинг 7 10 Пример создания вложенных списков

<html><head><title> СПИСОК СОТРУДНИКОВ </title></head>

<h2> Северо-Западный институт печати </h2>

<h3>Санкт-Петербургский государственный университет технологии и дизайна</h3>

<p> Единственный в Северо-Западном регионе России государственный специализированный ВУЗ </p> Виды списков 115

<ol>

<li> Факультет

<ul>

<li> Издательское дело, реклама и книжная торговля

<li> Полиграфические технологии и оборудование

<li> Заочное отделение

</ul>

<li> Специальности

<li> Издательское дело и редактирование

<li> Книгораспространение

<li> Реклама

<li> Графика

<li> Технология полиграфического производства

<li> Полиграфические машины и автоматизированные комплексы

<li> Автоматизация технологических процессов и производств

</ul>

</ol>

</body>

</html>

Рис 7 11 Еще один пример вложенных списков

Листинг 7 11 Еще один пример создания вложенных списков

<html><head><title> ПРИМЕР ВЛОЖЕННЫХ СПИСКОВ </title></head>

<ul>

<li> Пункт 1

<ol>

<li> Пункт 1.1

<LI> Пункт 1.2</li></ol>

<li> Пункт 2

<ol>

<li> Пункт 2.1116 Урок 7. Списки

<li> Пункт 2.2</li></ol>

<li> Пункт 3

<ol>

<li> Пункт 3.1

<li> Пункт 3.2</li></ol></li></ul>

</body></html>

Списки определений

Список определений состоит из специальным образом расположенных терми-

нов и их описаний (определений) Для создания списков определений на веб-

страницах используются теги <DL>, <DT> и <DD>

Тег <DL> Парный тег <DL> (от англ Definition List — список определений) на-

чинает список определений Он включает в себя теги <DT> (помечает термин)

и <DD> (помечает описание термина) Списки определений часто используют

в научно-технических и учебных изданиях, оформляя с их помощью глоссарии

Тег <DL> имеет атрибуты COMPACT (современными браузерами не поддержива-

ется), CLASS, ID, LANG и STYLE

Если определяемые термины короткие, используется атрибут COMPACT, кото-

рый предназначен для вывода элементов списка в компактной форме (с умень-

шенным кеглем и расстоянием между строками):

Атрибут COMPACT не имеет значений, синтаксис остальных атрибутов:

class="Стилевой класс"

id="Имя"

lang="Код языка"

style="Определение встроенного стиля"

Тег <DT> Тег <DT> (от англ Definition Term — определяемое слово, термин)

представляет собой блочный непарный тег, который помечает текст термина

в списке определений Атрибуты тега <DT>:

class="Стилевой класс"

id="Имя"

lang="Код языка"

Тег <DD> Тег <DD> (от англ Definition Description — описание определяемого

термина) представляет собой блочный непарный тег, который помечает текст

определения в списке определений Атрибуты тега <DD>:

class="Стилевой класс"

id="Имя"

lang="Код языка"

style="Определение встроенного стиля"

Пример списка определений показан на рис 7 12 (листинг 7 12)

Листинг 7 12 Пример создания списка определений

<html><head><title>ВВЕДЕНИЕ В ИНТЕРНЕТ</title></head>

<dl> Виды списков 117

<dt>Интернет

<dd>- совокупность сетей, применяющих единый протокол обмена (точнее, обширное

семейство из сотен протоколов) для передачи информации</dl>

<dl>

<dt>Локальная сеть

<dd>- соединение нескольких компьютеров при помощи технических и программных средств,

которые позволяют объединять файловые системы входящих в нее компьютеров </dl>

<dl>

<dt>Глобальная сеть

<dd>- такое соединение компьютеров, при котором допускается использование информации,

физически находящейся на других компьютерах сети (однако пользовательским программам

не представляется непосредственный доступ к файловой системе других компьютеров)</dl>

<dl>

<dt>Провайдер сетевых услуг

<dd>- владелец конкретной сети, с которой клиент находится в юридических отношениях</

dl>

<dl>

<dt>Бод

<dd>- бит в секунду - единица измерения пропускной способности канала - основная

характеристика канала связи</dl>

<dl>

<dt>Гипертекст

<dd>- информационная структура, обеспечивающая навигацию посредством гипертекстовых

ссылок</dl>

<dl>

<dt>Гипертекстовая ссылка

<dd>- фрагмент текста или изображение, при активизации которого отображается документ,

связанный со ссылкой</dl>

</body></html>

Рис 7 12 Список определений118 Урок 7. Списки

В заключение этого урока рассмотрим еще один пример нескольких списков с раз-

ными маркерами, который показан на рис 7 13 (листинг 7 13)

Рис 7 13 Списки с разными маркерами

Листинг 7 13 Пример создания списков с разными маркерами

<html><head><title>ЕЩЕ ОДИН ПРИМЕР СПИСКОВ</title>

</head>

<ul>

....<li>Метод мозгового штурма

....<li type=square> Метод моментов

</ul>

<ol>

....<li> Метод системологии

....<li> Метод системной ориентации

....<li value=4> Метод проб и ошибок

</ol>

....<li> Метод попарного сравнения

....<li> Метод профильного анализа

....<li> Метод Данахера-Руста

</ol>

</body></html>

Помимо описанных в этом уроке для создания логически связанных списков мож-

но использовать теги <MENU> и <DIR>

Синтаксис тега <MENU>:

<menu><li> элемент списка <li> элемент списка </menu>

Синтаксис тега <DIR>:

<dir><li> элемент списка <li> элемент списка </dir> Подведем итоги 119

Пример списка с созданием меню полей выбора представлен в листинге 7 14

Листинг 7 14 Пример создания списка с созданием меню

<html><head><title>СПИСОК С СОЗДАНИЕМ МЕНЮ </title>

</head>

<body>

<menu>

<li><input type="checkbox" />КРАСНЫЙ</li>

<li><input type="checkbox" />ЖЕЛТЫЙ </li>

<li><input type="checkbox" />ГОЛУБОЙ </li>

</menu>

НЕ УГНАТЬСЯ ЗА ТОБОЙ

</body></html>

Подведем итоги

В этом уроке рассматриваются способы создания разнообразных списков, в част-

ности нумерованных списков (с арабскими и римскими цифрами), маркирован-

ных списков (с маркерами в виде кругов и квадратов) и списков определений До-

пускается создание вложенных списков Урок 8 Таблицы

В этом уроке рассматриваются методы работы с таблицами, которые

в HTML-документах используются не только сами по себе, ни и с це-

лью точного позиционирования фрагментов текста и изображений

друг относительно друга.

Урок Основные теги таблиц 121

Основные теги таблиц

Ячейки таблиц в языке HTML могут содержать любые HTML-элементы, в том

числе заголовки, списки, текстовые абзацы, графику, а также элементы форм

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

Основным тегом, описывающим таблицу, является парный тег <TABLE> Все эле-

менты таблицы должны находиться внутри тегов <TABLE> и </TABLE> По умолча-

нию таблица не имеет обрамления и разделителей Обрамление добавляется атри-

бутом BORDER Размер рамки может быть фиксированным или автоматически со-

гласовываться с размерами окна просмотра браузера и размерами текста и рисун-

ков в ячейках Помимо своего естественного назначения (упорядочения текстовой

информации), таблицы позволяют решать чисто дизайнерские задачи: выравни-

вать части фрагменты страниц друг относительно друга, размещать рядом рисун-

ки и текст, управлять цветовым оформлением, разбивать текст на столбцы и т д

Тег <TABLE> имеет атрибуты ALIGN, BORDER, BACKGROUND, BGCOLOR, BORDERCOLOR,

CELLPADDING, CELLSPACING, HSPACE, SPACE, COLSPEC, WIDTH

Атрибут ALIGN Если атрибут ALIGN располагается внутри тегов <CAPTION>

и </CAPTION>, он определяет положение подписи таблицы и может принимать

значения TOP (сверху, вариант заданный по умолчанию) и BOTTOM (снизу)

Если атрибут ALIGN встречается внутри тегов <TR>...</TR>, <TH>...</TH> или

<TD>...</TD>, он управляет выравниванием данных в ячейках по горизонтали

и может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру)

Атрибут BORDER Атрибут BORDER определяет вид границ таблицы Если дан-

ный атрибут присутствует, граница таблицы прорисовывается для всех ячеек

и для таблицы в целом Атрибут BORDER может принимать числовые значения,

определяющие толщину границы, например:

border=3

Атрибут BACKGROUND Атрибут BACKGROUND позволяет создать фоновое

изображение для всей таблицы:

background = url

Атрибут BGCOLOR Атрибут BGCOLOR задает фоновый цвет

Атрибут BORDERCOLOR Атрибут BORDERCOLOR задает цвет рамки Исполь-

зуется только с атрибутом BORDER, например:

<tablе border="число" bordercolor="цвет">

Атрибут CELLPADDING Атрибут CELLPADDING определяет расстояние от гра-

ниц ячейки до ее содержимого в пикселах

Атрибут CELLSPACING Атрибут CELLSPACING определяет расстояние между

ячейками в пикселах

Атрибут HSPACE Атрибут HSPACE задает свободное пространство слева

и справа от таблицы в пикселах 122 Урок 8. Таблицы

Атрибут VS PACE Атрибут VSPACE задает свободное пространство сверху и сни-

зу от таблицы в пикселах

Атр ибут COLSPEC Атрибут COLSPEC позволяет создать столбцы фиксирован-

ный ширины Значение ширины задается либо в символах, либо в процентах,

например:

colspec="20%"

Атрибут WIDTH Атрибут WIDTH определяет ширину таблицы Значение ши-

рины задается либо в пикселах, либо в процентах от текущей ширины окна

браузера; например:

width=256

width=100%

Если вводимый текст не помещается в ячейку, то в нее с помощью символов &nbsp

вводят неразрывный пробел Это необходимо для прорисовки сетки таблицы

Создание строк и столбцов таблицы

Для создания строк и столбцов таблицы служат парные теги <TR> и <COL>

Тег <TR> (от англ Table Row — строка таблицы) задает строку таблицы Количество

строк определяется количеством встречающихся пар тегов <TR> и </TR> Строки

могут иметь атрибуты ALIGN (выравнивание по горизонтали) и VALIGN (выравнива-

ние по вертикали)

Тег <COL> (от англ Column — столбец) используется для задания столбцов табли-

цы и может иметь атрибуты WIDTH, BGCOLOR, ALIGN, VALIGN и ID

Атрибут WIDTH Атрибут WIDTH задает ширину ячеек в столбце:

Атрибут BGCOLOR Атрибут BGCOLOR задает цвет фона ячеек:

<сol bgcolor=цвет>

Атрибут ALIGN Атрибут ALIGN задает режим горизонтального выравнива-

ния содержимого внутри ячейки Он может принимать значения LEFT (влево),

CENTER (по центру) и RIGHT (вправо), например:

<сol align=значение>

Атрибут VALIGN Атрибут VALIGN задает режим вертикального выравнивания

содержимого внутри ячейки Он может принимать значения MIDDLE (посереди-

не) и TOP (вверх), например:

<сol valign=значение>

Атрибут ID Атрибут ID задает имя для ссылки, например:

Создание ячеек таблицы

Для создания ячейки таблицы служит парный тег <TD> (от англ Table Data — та-

бличные данные) Ячейка таблицы может быть описана только внутри строки та-

блицы Каждая ячейка должна быть пронумерована номером столбца, к которому

она относится Если в строке для некоторых столбцов отсутствует одна или не-

сколько ячеек, браузер отображает пустую ячейку Расположение данных в ячейке Теги группирования элементов таблиц 123

по умолчанию определяется атрибутами ALIGN=LEFT и VALIGN=MIDDLE Данное рас-

положение может быть изменено как на уровне описания строки, так и на уровне

описания ячейки

Создание заголовка и подписи таблицы

Для создания заголовка таблицы используется парный тег <TH> (от англ Table

Head — заголовок таблицы) Ячейка заголовка таблицы имеет ширину всей та-

блицы Текст в данной ячейке имеет атрибуты BOLD и ALIGN=CENTER

Для создания подписи таблицы используется парный тег <CAPTION> (от англ

caption — подпись) Тег <CAPTION> должен присутствовать внутри тегов <TABLE>

и </TABLE>, но вне описания строки или ячейки Атрибут ALIGN определяет, где

будет находиться подпись По умолчанию атрибут ALIGN имеет значение TOP

(сверху), но может быть установлен равным BOTTOM (снизу) Подпись всегда цен-

трирована в рамках таблицы по горизонтали

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги <COLGROUP>, <TBODY> и <TFOOT>

Группирование столбцов таблицы

Тег <COLGROUP> используется с целью группирования столбцов таблицы и может

иметь атрибуты BGCOLOR, ALIGN, VALIGN, SPAN, WIDTH, ID

Атрибут BGCOLOR Атрибут BGCOLOR задает цвет фона ячеек, например:

Атрибут ALIGN Атрибут ALIGN задает режим горизонтального выравнива-

ния содержимого внутри ячейки Он может принимать значения LEFT (влево),

CENTER (по центру) и RIGHT (вправо), например:

Атрибут VALIGN Атрибут VALIGN задает режим вертикального выравнивания

содержимого внутри ячейки Он может принимать значения MIDDLE (посереди-

не) и TOP (вверх), например:

Атрибут SPAN Атрибут SPAN задает количество столбцов в группе, например:

Атрибут WIDTH Атрибут WIDTH задает ширину ячеек в столбцах, например:

Атрибут ID Атрибут ID задает имя для ссылки, например:

Группирование строк таблицы

Для создания логических связанных групп строк в теле таблицы используется тег

<TBODY>, например:124 Урок 8. Таблицы

У тега <TBODY> есть атрибуты BGCOLOR, ALIGN, VALIGN, которые имеют тот же смысл,

что и одноименные атрибуты тега <COLGROUP>

Для логического группирования строк в верхней части таблицы (то есть для соз-

дания верхней шапки таблицы) используется тег <THEAD>, например:

У тега <THEAD> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же

смысл, что и одноименные атрибуты тега <COLGROUP>

Для логического группирования строк в нижней части таблицы (то есть для соз-

дания нижней шапки таблицы) используется тег <TFOOT>, например:

У тега <TFOOT> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же

смысл, что и одноименные атрибуты тега <COLGROUP>

Основные атрибуты элементов таблицы

Ниже перечислены основные атрибуты элементов таблиц С некоторыми из них

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

с другим познакомимся в этом разделе

Атрибут ALIGN Атрибут ALIGN управляет выравниванием содержимого яче-

ек Допустимые значения LEFT (влево), RIGHT (вправо) и CENTER (по центру)

Атрибут BACKGROUND Атрибут BACKGROUND задает фоновое изображение

для ячеек строки:

background=url

Атрибут BGCOLOR Атрибут BGCOLOR задает фоновый цвет для ячеек строки

Атрибут BORDER Атрибут BORDER задает толщину рамки, обрамляющей ячей-

ки строки Нулевое значение данного атрибута означает отсутствие обрамления

Атрибут VALIGN Атрибут VALIGN встречается внутри тегов <TR>, <TH> и <TD>

Он определяет вертикальное выравнивание данных в ячейках Доступные зна-

чения TOP (вверху), BOTTOM (внизу), CENTER (по центру), MIDDLE (посередине)

и BASELINE (по базовой линии)

Атрибут NOWRAP Атрибут NOWRAP говорит о том, что данные в ячейке не

могут логически разбиваться на строки и должны быть представлены одной

строкой

Атрибут COLSPAN Атрибут COLSPAN указывает, какое количество ячеек будет

объединено по горизонтали с указанной ячейкой По умолчанию значение это-

го атрибута равно 1

Атрибут ROWSPAN Атрибут ROWSPAN указывает, какое количество ячеек бу-

дет объединено по вертикали с указанной ячейкой По умолчанию значение

этого атрибута равно 1 Примеры таблиц 125

Атрибут RULES Атрибут RULES определяет правила вывода линий между

ячейками, например:

Доступные значения:

NONE — нет линий (это значение используется по умолчанию);

GROUPS — линии отображаются только между группами строк (которые за-

даются тегами <THEAD>, <TFOOT> и <TBODY>) или группами столбцов (кото-

рые задаются тегами <COLGROUP и <COL>);

ROWS — линии отображаются только между строками;

COLS — линии отображаются только между столбцами;

ALL — линии отображаются между строками и столбцами

Атрибут FRAME Атрибут FRAME указывает, какие стороны фрейма, окружаю-

щего таблицу, должны быть видимыми, например:

Доступные значения:

VOID — стороны невидимы (это значение используется по умолчанию);

ABOVE — видима только верхняя сторона;

BELOW — видима только нижняя сторона;

HSIDES — видимы только верхняя и нижняя стороны;

VSIDES — видимы только левая и правая стороны;

LHS — видима только левая сторона;

RHS — видима только правая сторона;

BOX — видимы все четыре стороны;

BORDER — как и в предыдущем случае, видимы все четыре стороны (визуаль-

ных различий между этими двумя значениями нет)

Атрибут ID Атрибут ID задает имя для ссылки, например:

Примеры таблиц

Программа, создающая таблицу из двух строк и семи столбцов, представлена в

листинге 8 1, а результат работы этой программы показан на рис 8 1 В этом при-

мере надписи в ячейках выполнены с использованием тегов <TH> и </TH>, поэтому

они центрированы по умолчанию

Листинг 8 1 Пример создания таблицы из двух строк и семи столбцов, в которой

надписи центрированы

<html><head><title>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</title>

</head>

<body>

<h3>Таблица из двух строк и семи столбцов</h3>

<tr align=center>126 Урок 8. Таблицы

<th bgcolor=white>а12

<th bgcolor=white>а14

<th bgcolor=white>а16

<th bgcolor=white>а21

<th bgcolor=white>а23

<th bgcolor=white>а25

</table></body></html>

Рис 8 1 Таблица из двух строк и семи столбцов, в которой надписи центрированы

В следующем примере, представленном на рис 8 2, надписи ячеек выполнены

с использованием тегов <TD> и </TD>, поэтому они по умолчанию выровнены по

левому краю (листинг 8 2)

Рис 8 2 Таблица из двух строк и семи столбцов, в которой надписи выровнены по левому краю Примеры таблиц 127

Листинг 8 2 Пример создания таблицы из двух строк и семи столбцов,

в которой надписи выровнены по левому краю

<html><head><title>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</title>

</head>

<body>

<h3>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</h3>

<tr>

<td bgcolor=white>а12

<td bgcolor=white>а14

<td bgcolor=white>а16

<tr>

<td bgcolor=white>а21

<td bgcolor=white>а23

<td bgcolor=white>а25

</table></body></html>

В листинге 8 3 представлена программа, создающая таблицу из четырех строк

и двух столбцов, у которой ширина рамки равна 1 пиксел, а не 4, как в предыду-

щем примере Результат работы этой программы показан на рис 8 3

Листинг 8 3 Пример создания таблицы из четырех строк и двух столбцов, у которой

ширина рамки равна 1 пиксел

<title>ТАБЛИЦА ЦВЕТОВ ИЗ ЧЕТЫРЕХ СТРОК И ДВУХ СТОЛБЦОВ</title></head>

<tr>

<h2>ЦВЕТОВАЯ МОДЕЛЬ CMYK</h2>

<tr>

<td width="50%">MAGENTA</td>

<tr>

<td width="50%">YELLOW</td>

<tr>

<td width="50%">BLAСK</td>

</table></body></html>128 Урок 8. Таблицы

Рис 8 3 Таблица из четырех строк и двух столбцов, у которой ширина рамки равна 1 пиксел

Программа, создающая таблицу из предыдущего примера, но выровненную по

центру и имеющую толщину рамки 70 пикселов, представлена в листинге 8 4,

а результат работы этой программы показан на рис 8 4 Здесь несколько раз ис-

пользован тег <BR>, что позволило опустить таблицу относительно заголовка

Ширина этой таблицы, регулируемая параметром WIDTH, составляет 30 % от ши-

рины экрана

Рис 8 4 Таблица, у которой ширина рамки равна 70 пикселов Примеры таблиц 129

Листинг 8 4 Пример создания таблицы, у которой ширина рамки равна 70 пикселов

<html><head><title>ТАБЛИЦА ЦВЕТОВ ИЗ ЧЕТЫРЕХ СТРОК И ДВУХ СТОЛБЦОВ</title></head>

<tr><h2>цветовая модель cmyk</h2><br><br><br><br>

<tr><td width="50%">MAGENTA</td>

<tr><td width="50%">YELLOW</td>

<tr><td width="50%">BLAСK</td>

</table></center></body></html>

Программа, создающая таблицу из девяти строк и девяти столбцов, представлена

в листинге 8 5, а результат работы этой программы показан на рис 8 5 Подпись

таблицы, которая задается тегом <CAPTION>, расположена сверху

Рис 8 5 Таблица из девяти строк и девяти столбцов

Листинг 8 5 Пример создания таблицы умножения

<html><head><title>ТАБЛИЦА</title></head>

<body>

<caption>ТАБЛИЦА УМНОЖЕНИЯ</caption>

<tr><th>4<td>8<td>12<td>16<td>20<td>24<td>28<td>32<td>36</tr>130 Урок 8. Таблицы

</table></body></html>

Программа, создающая таблицу без рамок из восьми строк и пяти столбцов, по-

казана в листинге 8 6 (рис 8 6)

Рис 8 6 Таблица из восьми строк и пяти столбцов

Листинг 8 6 Пример создания таблицы из восьми строк и пяти столбцов

<html><head><title>ТАБЛИЦЫ БЕЗ РАМКИ</title></head>

<body>

<h3>ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ</h3>

<table>

<tr><td>ячейка 11 </td><td>ячейка 12 </td><td>ячейка 13 </td><td>ячейка 14

</td><td>ячейка 15 </td></tr>

<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td><td>ячейка 24

</td><td>ячейка 25 </td></tr>

<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td><td>ячейка 34

</td><td>ячейка 35 </td></tr>

<tr><td>ячейка 41 </td><td>ячейка 42 </td><td>ячейка 43 </td><td>ячейка 24

</td><td>ячейка 45 </td></tr>

<tr><td>ячейка 51 </td><td>ячейка 52 </td><td>ячейка 53 </td><td>ячейка 44

</td><td>ячейка 55 </td></tr>

<tr><td>ячейка 61 </td><td>ячейка 62 </td><td>ячейка 63 </td><td>ячейка 54

</td><td>ячейка 65 </td></tr>

<tr><td>ячейка 71 </td><td>ячейка 72 </td><td>ячейка 73 </td><td>ячейка 64

</td><td>ячейка 75 </td></tr>

<tr><td>ячейка 81 </td><td>ячейка 82 </td><td>ячейка 83 </td><td>ячейка 74

</td><td>ячейка 85 </td></tr>

</table></body></html> Примеры таблиц 131

Программа, создающая ту же таблицу без рамок из восьми строк и пяти столбцов,

но с атрибутом WIDTH, равным 100 %, показана в листинге 8 7 (рис 8 7)

Рис 8 7 Таблица с шириной, равной ширине экрана

Листинг 8 7 Пример создания таблицы из восьми строк и пяти столбцов с шириной

экрана

<html><head><title>ТАБЛИЦЫ БЕЗ РАМКИ</title></head>

<body>

<h3>ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ</h3>

<tr><td>ячейка 11 </td><td>ячейка 12 </td><td>ячейка 13 </td><td>ячейка 14

</td><td>ячейка 15 </td></tr>

<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td><td>ячейка 24

</td><td>ячейка 25 </td></tr>

<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td><td>ячейка 34

</td><td>ячейка 35 </td></tr>

<tr><td>ячейка 41 </td><td>ячейка 42 </td><td>ячейка 43 </td><td>ячейка 24

</td><td>ячейка 45 </td></tr>

<tr><td>ячейка 51 </td><td>ячейка 52 </td><td>ячейка 53 </td><td>ячейка 44

</td><td>ячейка 55 </td></tr>

<tr><td>ячейка 61 </td><td>ячейка 62 </td><td>ячейка 63 </td><td>ячейка 54

</td><td>ячейка 65 </td></tr>

<tr><td>ячейка 71 </td><td>ячейка 72 </td><td>ячейка 73 </td><td>ячейка 64

</td><td>ячейка 75 </td></tr>

<tr><td>ячейка 81 </td><td>ячейка 82 </td><td>ячейка 83 </td><td>ячейка 74

</td><td>ячейка 85 </td></tr>

</table></body></html>

Программа, создающая ту же таблицу, но у которой расстояние от границы ячей-

ки до ее содержимого, задаваемое параметром CELLPADDING, равно 20 пикселов, по-

казана в листинге 8 8 (рис 8 8) 132 Урок 8. Таблицы

Рис 8 8 Таблица из восьми строк и пяти столбцов

Листинг 8 8 Пример создания таблицы из восьми строк и пяти столбцов

<html><head><title>ТАБЛИЦЫ БЕЗ РАМКИ</title></head>

<body>

<h3>ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ</h3>

<tr><td>ячейка 11 </td><td>ячейка 12 </td><td>ячейка 13 </td><td>ячейка 14

</td><td>ячейка 15 </td></tr>

<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td><td>ячейка 24

</td><td>ячейка 25 </td></tr>

<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td><td>ячейка 34

</td><td>ячейка 35 </td></tr>

<tr><td>ячейка 41 </td><td>ячейка 42 </td><td>ячейка 43 </td><td>ячейка 24

</td><td>ячейка 45 </td></tr>

<tr><td>ячейка 51 </td><td>ячейка 52 </td><td>ячейка 53 </td><td>ячейка 44

</td><td>ячейка 55 </td></tr>

<tr><td>ячейка 61 </td><td>ячейка 62 </td><td>ячейка 63 </td><td>ячейка 54

</td><td>ячейка 65 </td></tr>

<tr><td>ячейка 71 </td><td>ячейка 72 </td><td>ячейка 73 </td><td>ячейка 64

</td><td>ячейка 75 </td></tr>

<tr><td>ячейка 81 </td><td>ячейка 82 </td><td>ячейка 83 </td><td>ячейка 74

</td><td>ячейка 85 </td></tr>

</table></body></html>

Программа, создающая ту же таблицу, но с фоновым изображением, представлена

в листинге 8 9 (рис 8 9)

Листинг 8 9 Пример создания таблицы, у которой фоном является изображение

<html><head><title>ТАБЛИЦЫ БЕЗ РАМКИ</title></head>

<body>

<h3>ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ</h3>

<table width=100% cellpadding=20 background ="янтарная комната.jpg"> Примеры таблиц 133

<tr><td>ячейка 11 </td><td>ячейка 12 </td><td>ячейка 13 </td><td>ячейка 14

</td><td>ячейка 15 </td></tr>

<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td><td>ячейка 24

</td><td>ячейка 25 </td></tr>

<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td><td>ячейка 34

</td><td>ячейка 35 </td></tr>

<tr><td>ячейка 41 </td><td>ячейка 42 </td><td>ячейка 43 </td><td>ячейка 24

</td><td>ячейка 45 </td></tr>

<tr><td>ячейка 51 </td><td>ячейка 52 </td><td>ячейка 53 </td><td>ячейка 44

</td><td>ячейка 55 </td></tr>

<tr><td>ячейка 61 </td><td>ячейка 62 </td><td>ячейка 63 </td><td>ячейка 54

</td><td>ячейка 65 </td></tr>

<tr><td>ячейка 71 </td><td>ячейка 72 </td><td>ячейка 73 </td><td>ячейка 64

</td><td>ячейка 75 </td></tr>

<tr><td>ячейка 81 </td><td>ячейка 82 </td><td>ячейка 83 </td><td>ячейка 74

</td><td>ячейка 85 </td></tr>

</table></body></html>

Рис 8 9 Таблица, у которой фоном является изображение

Программа, создающая таблицу с использованием атрибута CELLPADDING, равного

<<< < Предыдущая 1 2 3 4 5 6 7 89 / 219 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.12.2018386.05 Кб18Киса.doc
#
09.04.2015435.71 Кб15Кластеры.doc
#
09.04.2015359.82 Кб26кол.docx
#
20.08.2019200.7 Кб7колеб.контура.doc
#
15.03.2016222.72 Кб48Колебания типа E в прямоугольном объемном резонаторе.docx
#
27.08.20191.1 Mб16Комолова.doc
#
12.07.201960.12 Кб18комп.преступление2.docx
#
09.04.2015463.87 Кб35Компьютерные сети Лабораторная 01.doc
#
20.04.20191.19 Mб47Конспект лекций 4306 - 2007.doc
#
14.03.2016176.13 Кб182Конспект лекций материаловед.2...doc
#
09.04.20154.36 Mб509Конспект лекций от мешка 1.doc