- •Лабораторная работа №4. Организация текста внутри html-документов с помощью таблиц Элементы html для построения таблиц
- •Пример листинга таблицы в элементах html
- •Дополнительные возможности при построении таблиц
- •Объединение нескольких строк в одну ячейку
- •Объединение нескольких столбцов в одну ячейку
- •Объединение нескольких столбцов и нескольких строк
- •Атрибуты элемента table
- •Выравнивание заголовка таблицы
- •Выравнивание текста в ячейках таблицы
- •Управление цветом фона и сетки ячеек таблицы
- •Управление размерами ячеек таблицы
- •Предварительное форматирование
- •Задание к лабораторной работе
Объединение нескольких столбцов и нескольких строк
Пример объединения столбцов и ячеек:
|
Таблица | ||
|
Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
|
Ячейка 1 |
Ячейка 2 | |
|
Ячейка 3 | ||
|
Ячейка 4 | ||
|
Ячейка 5 | ||
Запись таблицы примет вид:
<TABLE BORDER>
<CAPTION> Таблица </caption>
<TR>
<TH> Заголовок 1 </TH>
<TH> Заголовок 2 </TH>
<TH> Заголовок 3 </TH>
</TR>
<TR align="center">
<TD rowspan=3 colspan=2 valign="middle"> Ячейка 1 </TD>
<TD> Ячейка 2 </TD>
</TR>
<TR>
<TD> Ячейка 3 </TD>
</TR>
<TR>
<TD align="center"> Ячейка 4 </TD>
</TR>
<TR>
<TD colspan=3 > Ячейка 5 </TD>
</TR>
</TABLE>
Атрибуты элемента table
1. border. Управляет шириной боковой грани рамки таблицы (толщиной рамки таблицы). Величина задается в пикселах. При отсутствии атрибута или при задании ему нулевого значения рамка таблицы и сетка внутри таблицы исчезают. По умолчанию при наличии атрибута border без значения толщина рамки таблицы равна одному пикселу.
2. cellspacing. Устанавливает расстояние между рамками ячеек. Величина задается в пикселах. При отсутствии атрибута по умолчанию значение равно двум пикселам.
3. cellpadding. Задает размер пустого пространства между текстом и рамками ячеек. Величина задается в пикселах или в процентах. При отсутствии атрибута по умолчанию значение равно одному пикселу.
4. width. Ширину таблицы можно задать в пикселах или в процентном отношении к ширине страницы в окне браузера. При отсутствии атрибута ширина таблицы определяется содержимым ячеек.
5. align. Выравнивает таблицу по горизонтали:
align ="left"- влево
align ="center"- по центру
align ="right"- вправо
При отсутствии атрибута по умолчанию выравнивание производится влево.
6. frame. Управляет видом табличной рамки:
frame="void" - рамка отсутствует
frame="above" - рамка только сверху таблицы
frame="below" - рамка только снизу таблицы
frame="hsides" - рамка сверху и снизу таблицы
frame="vsides" - рамка по бокам таблицы таблицы
frame="rhs" - рамка только справа
frame="lhs" - рамка только слева
frame="box" или "border" - рамка полностью по периметру
7. rules. Определяет вид сетки таблицы между ячейками:
rules ="none" - сетка отсутствует
rules ="rows" - горизонтальные линии между строками
rules ="cols" - вертикальные линии между колонками
rules ="all" - все линии сетки внутри таблицы
8. bgcolor. Задает цвет фона таблицы названием цвета или 6-ти значным 16-м кодом цвета.
9. bordercolor. Задает цвет сетки таблицы названием цвета или 6-ти значным 16-м кодом цвета.
10. background. Задает фоновый рисунок таблицы названием графического файла.
Выравнивание заголовка таблицы
Атрибут align в теге <CAPTION> управляет положением заголовка:
align ="top"- заголовок над таблицей
align ="bottom"- заголовок под таблицей
align ="left"- заголовок вверху и выровнен влево
align ="right"- заголовок вверху и выровнен вправо
Выравнивание текста в ячейках таблицы
Для каждой ячейки таблицы можно задать выравнивание текста, как по горизонтали, так и по вертикали. Способы выравнивания задаются атрибутами align и valign.
Для строки в теге <TR> и для ячейки в теге <TD> или <TH>.
-
Атрибуты выравнивания
Атрибут
Значение атрибута
Действие атрибута
align=
"left"
Выравнивает текст в ячйке по левому краю (по умолчанию)
"center"
Выравнивает текст в ячйке по центру
"right"
Выравнивает текст в ячйке по правому краю
valign=
"top"
Выводит текст от самого верха ячйки
"middle"
Выравнивает текст в ячйке вертикально по центру (по умолчанию)
"bottom"
Выравнивает текст в ячйке по нижнему краю
Специальный символ неразрывного пробела вставляется в ячейки, не имеющие текста или данных, чтобы ячейка имела рамку.
