8. Язык html. Таблицы. X 2

http://pyramidin.narod.ru/html401/tables.html

<TABLE border="1"

summary="This table gives some statistics about fruit

flies: average height and weight, and percentage

with red eyes (for both males and females).">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR><TH rowspan="2"><TH colspan="2">Average

<TH rowspan="2">Red<BR>eyes

<TR><TH>height<TH>weight

<TR><TH>Males<TD>1.9<TD>0.003<TD>40%

<TR><TH>Females<TD>1.7<TD>0.002<TD>43%

</TABLE>

Определения атрибутов

summary = text [CS]

Определяет общую информацию о назначении и структуре таблицы для пользовательского агента (ПА) с невизуальными носителями: речевых и по Брайлю.

align = left|center|right [CI]

Не рекомендуется. Этот атрибут определяет положение таблицы по отношению к документу. Допустимые значения:

• left: влево;.

• center: по центру документа;.

• right: справа.

width = length [CN]

Определяет необходимую ширину всей таблицы и предназначен для ПА. Если значение указано в процентах, оно является относительным к доступному в ПА горизонтальному пространству. При отсутствии спецификации ширины, ширина таблицы определяется ПА.

Ряды таблицы могут быть сгруппированы в "шапку", футер и один или более разделов тела документа с помощью элементов THEAD, TFOOT и TBODY соответственно. Это разделение делает возможным для ПА поддерживать прокрутку тела таблицы независимо от "шапки" и футера. Если распечатываются большие таблицы, информация "шапки" и футера может повторяться на каждой странице, содержащей данные таблицы.

<TABLE>

<THEAD>

<TR> ...информация "шапки"...

<TFOOT>

<TR> ...информация футера...

<TBODY>

<TR> ...первый ряд данных блока 1...

<TR> ...второй ряд данных блока 1...

<TBODY>

<TR> ...первый ряд данных блока 2...

<TR> ...второй ряд данных блока 2...

<TR> ...третий ряд данных блока 2...

</TABLE>

Разделы THEAD, TFOOT и TBODY должны содержать одинаковое количество столбцов.

9. Каскадные таблицы стилей. Локальные таблицы стилей.

http://htmlteacher.narod.ru/css.html

есть 3 метода добавления стилей в документ:

1. Внутренние или локальные стили inline style стиль определяется непосредственно в элементе

<h1 style=”font-size:120%”>

заголовок

</h1>

Представим себе три типа стилей: локальный (параметр STYLE), глобальный (описанный тегом STYLE в заголовке страницы) и внешний (тот, что в подключаемом файле). Это и есть три каскада. Дело в том, что эти три типа могут применяться одновременно. Каждый предыдущий стиль (в том порядке, в котором я их указал) может переопределять следующий.

10. Каскадные таблицы стилей. Глобальные таблицы стилей.

http://htmlteacher.narod.ru/css.html

есть 3 метода добавления стилей в документ:

2. Таблицы глобальных стилей. Определяется в заголовочной секции HEAD с использованием тега STYLE.

<html>

<head>

<style type=text/css>

p{

font-size : 20%,

text-align:center

background: yellow

}

</style>

</head>

Для того, чтобы определить стиль для группы тегов, существуют классы. Эти вещи пишутся только во внешних и глобальных таблицах стилей.

Для того, чтобы определить класс, надо придумать ему имя. Оно может состоять только из англ. букв, цифр и знака подчерка (_). После этого пишете следующее:

P.data {color: green; font-famiy: verdana}

этот пример создает класс по имени data, который может использоваться только тегами P. Для того, чтобы применить класс к тегу - припишите к тегу CLASS="classname", наример:

<P CLASS="data">

Все, что находится посде этого тега, я имею в виду текст, будет зеленым и нарисовано шрифтом Verdana. Если вы припишете CLASS="data" тегу TD, ничего не произойдет, так как этот класс определен только для тегов P. Для того, чтобы определить класс для нескольких тегов надо перечислить их через запятую:

P,TD.data {color: green; font-famiy: verdana}

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

.data {color: green; font-famiy: verdana}

Для того, чтобы не определять никаких классов, а просто изменить начертание одного или нескольких тегов пишем:

LI {color: green; font-famiy: verdana} P,TD {color: green; font-famiy: verdana}