Задание 4.4.Создать файл Pr_3_3.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:
Лабораторная работа 5. Создание таблиц
Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок. Таблица начинается тегом <TABLE> и заканчивается парным ему тегом </TABLE>. Параметр BORDER тега <TABLE> обозначает ширину рамки таблицы. Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тегом <TR> и заканчивается парным ему тегом </TR>. Ячейки в строке описываются слева направо. Каждая ячейка начинается тегом <TD> и заканчивается парным ему тегом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы). Важно, что в HTML таблицы используются не только для отображения таблиц как таковых, но и для дизайна. С помощью таблиц можно создать невидимый "каркас" страницы, помогающий расположить текст и изображения определенным образом. Элементы для создания таблиц: · TABLE - Создает таблицу. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION. Атрибуты: o ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию – left. o VALIGN – должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle. o BORDER – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет. o CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. o CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек. Например: <TABLE CELLSPACING="5" CELLPADDING="10"> o WIDTH – определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. o HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. Например, таблица: <TABLE WIDTH="50%" HEIGHT="300"> должна занимать 50 процентов ширины окна браузера и иметь высоту 300 пикселов. Однако если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота). o BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. o BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. ● CAPTION - Задает заголовок таблицы ● TR - Создает новый ряд (строку) ячеек таблицы Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH. Атрибуты: o ALIGN – определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right. o VALIGN – определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle. o BGCOLOR – определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. o HEIGHT - задает высоту строки таблицы в пикселах или в процентах от общей высоты таблицы. Например, строка: <TR HEIGHT="30"> должна иметь высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена. ● TD и TH - Создает ячейку с данными в текущей строке. Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки заголовка и ячеек с данными разными шрифтами. Кроме того, должна улучшиться работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.Атрибуты: o ALIGN – определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH – центрирование. o VALIGN – определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR. o WIDTH – определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы. o HEIGHT – определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к высоте таблицы. Например, ячейка: <TD WIDTH="50" HEIGHT="30"> должна иметь ширину 50 и высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область или эти размеры не стыкуются с другими, эти команды не выполняются. o COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. Пример1: <TABLE BORDER="1"> o ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1. Пример2: <TABLE BORDER="1"> o NOWRAP – блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного атрибута (далее, внизу страницы). o BGCOLOR – определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. o BACKGROUND – заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный атрибут не работает в старых версиях браузера Netscape (до 3.X включительно). Следует отметить: 1) Выравнивание данных, выполняемое через параметры ALIGN и VALIGN, может выполняться для строки или для отдельной ячейки. Пример 3: <TR ALIGN="center" VALIGN="top"> 2) Можно манипулировать цветом и фоном в ячейках таблицы. Пример4: <TABLE BORDER="1" BGCOLOR="green">
|
