Урок 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 | |
|