Меню сайта

Категории раздела
Язык разметки гипертекста [1]
Создание HTML-документа [7]
Web-графика [0]
Каскадные таблицы стилей [0]

Наш опрос
Оцените мой сайт
Всего ответов: 22

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная

Регистрация

Вход
Приветствую Вас Гость | RSS


Учебный сайт


Понедельник, 18.06.2018, 17:57

Главная » Статьи » Создание HTML-документа

Урок 7. Таблицы

Таблицы

Таблицы служат для размещения данных в ячейках и являются удобным средством позиционирования материалов на Web-странице. Браузер автоматически прорисовывает рамки таблицы. Размер рамки также может быть автоматически согласован с размером окна просмотра в браузере и с размером находящихся в ячейках таблицы строк текста и рисунков. Кроме этого, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т. д.

При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в строке TD, TH.

HTML-код для создания простейшей таблицы  и ее вид показаны ниже:

<TABLE border=1>
 <TR>
   <TD>Ячейка 1</TD>
   <TD>Ячейка 2</TD>
 </TR>
 <TR>
   <TD>Ячейка 3</TD>
   <TD>Ячейка 4</TD>
 </TR>
 <TR>
   <TD>Ячейка 5</TD>
   <TD>Ячейка 6</TD>
 </TR>
 <TR>
   <TD>Ячейка 7</TD>
   <TD>Ячейка 8</TD>
 </TR>
</TABLE>
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8

Элемент TABLE – Таблица. Является внешним элементом таблицы и позволяет задать ее общие свойства. Имеет атрибуты:

Атрибут и его возможные значения

Назначение атрибута

width=”n|%” Рекомендуемая ширина таблицы в пикселях или процентах от текущей ширины окна браузера
align=”left|right|center” Выравнивание таблицы по левому, центру или правому краю окна браузера, дает возможность выполнить обтекание таблицы текстом с противоположенной стороны
background=”url” Фоновое изображение для всей таблицы
border=”n” Ширина боковой грани
bgcolor=”цвет” Цвет фона таблицы
bordercolor=”цвет” Цвет рамки таблицы
bordercolordark=”цвет” Цвет темной грани трехмерной рамки таблицы
bordercolorlight=”цвет”  Цвет светлой грани трехмерной рамки таблицы
cellspacing=”n” Расстояние между ячейками в пикселях
cellpadding=”n”  Расстояние от границ ячейки до ее содержимого в пикселях
height=”n” Рекомендуемая высота таблицы в пикселях
hspace=”n” Свободное пространство слева и справа от таблицы в пикселях
vspace=”n” Свободное пространство сверху и снизу от таблицы в пикселях
frame=”значение атрибута”  Вид рамки таблицы: box (все рамки), above (верхняя), below (нижняя), hsides (нижняя и верхняя), vsides (левая и правая), lhs (левая), rhs (правая), void (без рамки)
rules=”значение атрибута” Вид сетки таблицы: all (все линии), groups (разделяющие группы), rows (горизонтальные), cols (вертикальные),none (сетка отсутствует)
 

Элемент TR (table row) – Строка таблицы. Создает строку таблицы. Имеет атрибуты:

 

Атрибут и его возможные значения

Назначение атрибута

align=”left|right|center” Выравнивание содержимого ячеек по горизонтали
border=”n”  Толщина рамки, обрамляющей ячейки данного ряда
bgcolor=”цвет” Цвет фона для ячеек данного ряда
bordercolor=”цвет” Цвет рамки строки таблицы
bordercolordark=”цвет”   Цвет темной грани трехмерной рамки строки таблицы
bordercolorlight=”цвет”  Цвет светлой грани трехмерной рамки строки таблицы
valign=”top|middle|bottom” Вертикальное выравнивание содержимого ячеек


Элемент TD (table date) – Ячейка таблицы. Создает ячейку таблицы.

Элемент TH (table header) – Заглавная ячейка. Создает ячейку, которая является заглавием столбца или строки таблицы (текст полужирный с выравниванием по центру).

Элементы TD, TH имеют одинаковые атрибуты:

Атрибут и его возможные значения

Назначение атрибута

align=”left|right|center” Выравнивание содержимого ячейки по горизонтали
bgcolor=”цвет”  Цвет фона для ячейки
border=”n” Толщина рамки, обрамляющей ячейку
colspan=”j” Указывает количество столбцов, охватываемых ячейкой
nowrap Запрет переноса текста в ячейке
rowspan=”k” Указывает количество строк, охватываемых ячейкой
valign=”top|middle|bottom” Вертикальное выравнивание содержимого ячеек
width=”n|%” Ширина ячейки в пикселях или процентах от ширины таблицы.
      
Элемент CAPTION - Заголовок таблицы. Создает заголовок таблицы, который располагается над или под таблицей.
Записывается сразу после тега <TABLE>до первого <TR>.

Атрибут и его возможные значения

 Назначение атрибута

align=”left|right|center” Выравнивание заголовка по горизонтали
valign=”top|bottom” Размещение заголовка над или под таблицей

Элементы COLGROUP и COL – Группа колонок. Обеспечивает выравнивание данных в группе. Записывается сразу после тега <TABLE>до первого <TR>. Поддерживает только Internet Explorer.

Атрибут и его возможные значения

Назначение атрибута

align=”left|right|center” Выравнивание данных в ячейках группы колонок
valign=”top|middle|bottom”   Вертикальное выравнивание данных в ячейках группы колонок
span=”n”  Число колонок, на которые распространяются значения атрибутов выравнивания
width=”n|%”  Ширина колонки в пикселях или процентах от ширины таблицы.

Элементы THEAD, TFOOT, TBODY – Группы cтрок: заголовок таблицы, нижний колонтитул, группы центральной части таблицы. Обеспечивает выравнивание данных в группе. Поддерживает только Internet Explorer.

Атрибут и его возможные значения

Назначение атрибута

align=”left|right|center” Выравнивание данных в ячейках группы строк
valign=”top|middle|bottom” Вертикальное выравнивание данных в ячейках группы строк


Практическая работа

1. На основе файла шаблона (template.htm) создать HTML-документ для выполнения задания по теме "Таблицы" (table.htm). В созданном HTML-документе откорректировать содержание элемента TITLE в соответствии с текущей темой занятия.

2. Создать таблицу в два столбца и четыре строки
<TABLE border="1"> 
<TR><TD> Ячейка 1</TD><TD> Ячейка 2</TD></TR>
<TR><TD> Ячейка 3</TD><TD> Ячейка 4</TD></TR> 
<TR><TD> Ячейка 5</TD><TD> Ячейка 6</TD></TR>
<TR><TD> Ячейка 7</TD><TD> Ячейка 8</TD></TR> 
</TABLE> 

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Ячейка 8

3. Изменить параметры таблицы: задать размер таблицы 60% от размера окна браузера, ширина боковой грани 15 пикселей, ширина фронтальной грани 5 пикселей, ширина поля между данными ячейки и ее рамкой 10 пикселей, цвет фона magenta, выровнять таблицу по правому краю окна. Для этого в тег <TABLE>добавить код:

<TABLE border=”15” cellSpacing=”5” cellPadding=”10” width=”80%” bgColor="magenta" align="right">

4. Проверить возможность обтекания таблицы текстом и работу элемента BR с атрибутом clear путем набора трех предложений произвольного текста с постановкой тэга <BR clear="right"> после второго предложения.

5. Проверить работу атрибутов управляющих внешним видом рамки и сетки таблицы. Для этого скопировать код, созданный по пункту 3 и в полученной таблице обеспечить прорисовку только верхней и нижней стороны рамки (в тег <TABLE>добавить атрибут frame="hsides") с внутренними линиями сетки, разделяющими только строки (в тег <TABLE>добавить атрибут rules="rows").

6. Проверить работу атрибутов управляющих данными в строках и ячейках. Для этого:

    • Создать третью таблицу, скопировав код, созданный по пункту 3.
    • Содержание второй строки выровнять по правому краю ячеек (в соответствующий тег <TR> добавит атрибут align="right").
    • Для четвертой ячейки задать ширину 60 пикселей, высоту 100 пикселей, цвет фона красный (в соответствующий тег <TD> добавить атрибуты width=”60”, height=”100”, bgcolor="red").
    • В пятую ячейку ввести текст "В этой ячейке запрещен перенос текста" и обеспечить этот запрет (в соответствующий тег <TD> добавить атрибут nowrap).
    • Объединить ячейки: первую и третью - объединение двух строк (в соответствующий тег <TD> добавить атрибут rowSpan=”2” и удалить лишний код создающий третью ячейку), седьмую и восьмую - объединение двух столбцов (в соответствующий тег <TD> добавить атрибут colSpan="2" и удалить лишний код создающий восьмую ячейку).

7. Заголовки таблиц. Для первой таблицы оформить заголовок "Таблица № 1" с размещением его над таблицей с выравниванием по правому краю (в код первой таблицы после тега <TABLE>добавить тег <CAPTION> с соответствующими атрибутами <CAPTION vAlign="top" align="right">) и для третьей таблицы оформить заголовок "Таблица № 3" с размещением под таблицей с выравниванием по левому краю (в код третьей таблицы после тега <TABLE>добавить тег <CAPTION> с соответствующими атрибутами <CAPTION vAlign="bottom" align="left">).

8. Заглавные ячейки. Первую и вторую ячейки таблицы № 1 оформить как заглавия колонок с выравниванием по левому и правому краю. Для этого теги, создающие соответствующие обычные ячейки заменить на теги создающие заглавные ячейки

<TR><TH align="left">Заглавие 1</TH><TH align="right">Заглавие 2</TH></TR>

9. Выравнивание данных в столбцах и структурирование таблицы.
Для этого создать создать таблицу 4, скопировать код таблицы, созданный по пункту 3.
  • Первый столбец оформить как группу колонок с одной колонкой в группе и все данные этой группы выровнять по центру.
  • Второй столбец оформить как группу колонок с одной колонкой в группе и все данные этой группы выровнять по правому краю.
  • Первую строку оформить как группу строк заголовка, вторую - как группу строк нижней части таблицы, третью и четвертую - как основную часть таблицы. Каждой группе задать разный цвет.
Полученный код и результат должны выглядеть так:
<TABLE border=15 cellSpacing=5 cellPadding=10 
width="80%" bgColor=magenta align=right>
<COLGROUP>
<COL span=”1” align=middle>
<COL span=”1” align=right>
<THEAD bgColor=red>
<TR><TH>Ячейка 1</TH><TH>Ячейка 2</TH></TR>
</THEAD>
<TFOOT bgColor=green>
<TR><TD>Ячейка 3</TD><TD>Ячейка 4</TD></TR>
</TFOOT>
<TBODY bgColor=blue>
<TR><TD>Ячейка 5</TD><TD>Ячейка 6</TD></TR>
<TR><TD>Ячейка 7</TD><TD>Ячейка 8</TD></TR>
</TBODY>
</TABLE>

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8

 

Категория: Создание HTML-документа | Добавил: asan (28.11.2010)
Просмотров: 1054 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Поиск

Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2018 Бесплатный конструктор сайтов - uCoz