ОГЛАВЛЕНИЕ
1 Представление таблиц на Web-странице
1.1 Задание параметров таблицы
1.2. Формирование таблицы
1.3. Использование CSS для задания параметров таблиц
2 Задание движущихся элементов на Web-странице
Пример №1
1 Представление таблиц на Web-странице
HTML обладает большими возможностями для представления на Web-странице различных таблиц. Необходимо отметить, что средства формирования таблиц используются в HTML не только и, наверно, не столько для изображения собственно таблиц, как для размещения элементов Web-страницы на экране. В этом случае экран браузера представляется в виде таблицы с невидимыми границами, и отдельные элементы Web-страницы помещаются в ту или иную ячейку таблицы.
1.1 Задание параметров таблицы
Таблицы в HTML указывается с помощью тэга-контейнера <TABLE> . . . </TABLE>. Общие параметры таблицы задаются в тэге <TABLE> , который содержит следующие параметры:
- ALIGN - выравнивание таблицы:
- left - по левому краю;
- center - по центру;
- right - по правому краю.
- WIDTH - ширина таблицы указывается или в пикселях, или в процентах от ширины экрана (по умолчанию берется минимально необходимой для представления данных).
- HEIGHT - высота таблицы указывается или в пикселях, или в процентах от высоты экрана (по умолчанию берется минимально необходимой для представления данных).
- BORDER - ширина ограничивающих линий (или просто границ) таблицы, указывается в пикселях и по умолчанию равна 0 - в этом случае границ таблицы не видно;
- BORDERCOLOR - цвет границ таблицы;
- BGCOLOR - цвет фона таблицы;
- CELLSPACING - расстояние в пикселях между соседними ячейками таблицы (ограничивающие линии включаются в ячейку), по умолчанию равно 2;
- CELLPADDING - расстояние в пикселях между границей ячейки и ее содержимым, по умолчанию равно 1.
Заголовок таблицы, если он необходим, задается с помощью тэга-контейнера <CAPTION> . . . </CAPTION>, который содержит параметр ALIGN:
- ALIGN - задание расположения заголовка таблицы:
- top - сверху таблицы;
- bottom - снизу таблицы.
В примере № 1 показано задание параметров таблицы.
1.2 Формирование таблицы
После задания параметров и заголовка таблицы выполняется формирование ее структуры и содержимого.
Построение таблицы осуществляется построчно с помощью тэгов-контейнеров <TR> . . . </TR> (TR - Table Row, строка таблицы).
Формирование каждой строки выполняется по ячейкам строки слева направо с помощью тэгов-контейнеров <TH> . . . </TH> (TH - Table Head, заголовок таблицы), задающих названия (заголовки) столбцов таблицы, и тэгов-контейнеров <TD> . . . </TD> (TD - Table Data, данные таблицы), задающих значения элементов таблицы.
Оба тэга <TH> и <TD> задают параметры и содержимое ячейки. Различие между ними заключается в том, что <TH> по умолчанию содержит полужирный текст и выравнен по центру, а <TD> - содержит обычный текст и выравнен по левому краю.
Тэги <TR>, <TD> и <TH> могут иметь те же параметры, что и тэг <TABLE>, но область действия значений этих параметров ограничивается соответственно строкой или ячейкой таблицы.
Эти тэги наряду с горизонтальным выравниванием (параметр ALIGN) имеют возможность выравнивания содержимого ячеек по вертикали с помощью параметра VALIGN:
- VALIGN - вертикальное выравнивание элементов таблицы:
- top - выравнивание по верхнему краю ячейки;
- middle - выравнивание по середине ячейки;
- bottom - выравнивание по нижнему краю ячейки.
Для объединения ячеек по столбцам и строкам тэги TH> и <TD> могут также иметь параметры COLSPAN и ROWSPAN, которые задают соответственно число объединенных столбцов или объединенных строк.
В примере № 1 показано построение таблицы с использованием объединения по столбцам и строкам.
1.3 Использование CSS для задания параметров таблиц
И при построении таблицы могут быть задействованы расширенные возможности CSS. Для этих целей подходят свойства, задающие параметры границ элементов Web-страницы. Они могут быть использованы для задания границ таблицы. Каскадные листы стилей имеют следующие свойства задания параметров границ элементов:
- border-color - указывает цвет границы, может быть задано от одного до четырех значений:
- если задано одно значение - оно применяется ко всем четырем границам;
- если задано два значения - первое относится к верхней и нижней границам, второе - к левой и правой границе;
- если задано три значения - первое применяется к верхней границе, второе относится к левой и правой границе, третье - к нижней границе.
- border-style - указывает стиль границы:
- none - граница не видна (значение, принимаемое по умолчанию);
- solid - сплошная линия;
- double - двойная сплошная линия;
- dotted - линия в виде точек;
- dashed - пунктирная линия;
- groove - трехмерная вогнутая граница;
- ridge - трехмерная выпуклая граница;
- inset - трехмерная граница "ступенька вверх";
- outset - трехмерная граница "ступенька вниз".
- border-width - указывает толщину границ, может быть задано от одного до четырех значений:
- если задано одно значение - оно применяется ко всем четырем границам;
- если задано два значения - первое относится к верхней и нижней границам, второе - к левой и правой границе;
- если задано три значения - первое применяется к верхней границе, второе относится к левой и правой границе, третье - к нижней границе.
Толщина границ может быть задана с помощью числового значения в пикселях, а также можно использовать при предоопределенных значения:
- thin - тонкая линия;
- medium - линия средней толщины (значение, принимаемое по умолчанию);
- thick - толстая линия;
- border-collapse - указывает будут ли границы ячеек таблицы и границы самой таблицы сливаться в одну (применяется только для тэга <TABLE>):
- separate - разделяет границу таблицы и границы ее ячеек (значение, принимаемое по умолчанию);
- collapse - объединяет их.
Параметры границы, как и параметры шрифта, можно указывать в сокращенной форме. Например, вместо задания свойств границы в виде:
<TD STYLE="border-color:green; border-style:dotted; border-width:6">
можно использовать такую форму:
<TD STYLE="border:green dotted 6">
Если при этом указаны не все свойства границы, то остальные наследуются или принимаются по умолчанию.
Помимо задания свойств сразу нескольких границ элемента CSS имеют возможность задания свойств только одной границы:
- border-top - верхней границы;
- border-bottom - нижней границы;
- border-left - левой границы;
- border-right - правой границы.
Для указания сразу нескольких свойств каждой из этих границ можно использовать сокращенную форму задания значений, как приведено выше. Для задания одного из свойств границы можно воспользоваться одним из следующих свойств:
- border-top-style - задание стиля верхней границы;
- border-top-width - задание ширины верхней границы;
- border-top-color - задание цвета верхней границы;
- border-bottom-style - задание стиля нижней границы;
- border-bottom-width - задание ширины нижней границы;
- border-bottom-color - задание цвета нижней границы;
- border-left-style - задание стиля левой границы;
- border-left-width - задание ширины левой границы;
- border-left-color - задание цвета левой границы;
- border-right-style - задание стиля правой границы;
- border-right-width - задание ширины правой границы;
- border-right-color - задание цвета правой границы.
В примере № 1 показано использование свойств CSS при построеним таблицы.
2 Задание движущихся элементов на Web-странице
Для задания движущихся элементов на Web-странице используется тэг-контейнер <MARQUEE> . . . </MARQUEE>. Движущийся элемент (в качестве которого может быть использован текст, рисунок, таблица и другие элементы Web-страницы) помещается внутри контейнера, т.е. между тэгами <MARQUEE> и </MARQUEE>. Тэг <MARQUEE> имеет следующие параметры:
- SCROLLDELAY - указывает задержку в мс;
- SCROLLAMOUNT - указывает число пикселов, на которое сдвигается элемент (скорость его перемещения);
- BEHAVIOR - указывает характер движения:
- scroll - элемент перемещается в одну сторону (задается по умолчанию);
- alternate - элемент перемещается поочередно то в одну сторону, то в другую;
- slide - элемент перемещается до края и останавливается.
- DIRECTION - указывает направление движения элемента:;
- left - справа налево (задается по умолчанию);
- right - слева направо;
- up - снизу вверх;
- down - сверху вниз;
- LOOP - указывает число повторений, если 0 или infinite - бесконечно (задается по умолчанию).
В качестве примера построения таблицы на Web-странице приведем следующий HTML-документ:
Пример 1
<HTML>
<HEAD>
<TITLE> Таблицы в html </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE>TABLE{font: italic 6mm; color:#00A}</STYLE>
</HEAD>
<BODY>
<H1> ТАБЛИЦЫ НА WEB-СТРАНИЦЕ </H1>
<TABLE BORDER=2 BORDERCOLOR=RED BGCOLOR=#E0E0E0 CELLSPACING=4 CELLPADDING=3
ALIGN=center WIDTH=105%>
<CAPTION ALIGN=bottom> ТАБЛИЦА 1 </CAPTION>
<TR BGCOLOR=aqua>
<TH COLSPAN=3> Заголовок столбцов 1-3 <TH> Столбец 4
<TR>
<TD ALIGN=right> 1/1
<TD ALIGN=center STYLE="border-width:thick medium"> 1/2
<TD ROWSPAN=2 VALIGN=top>
<MARQUEE SCROLLAMOUNT=2 BEHAVIOR=slide DIRECTION=down> 1-2/3 </MARQUEE><TD> 1/4
<TR>
<TD COLSPAN=2 BGCOLOR=#E0E0FF STYLE="font-size:8mm; border:blue 10 dotted">
<MARQUEE BEHAVIOR=alternate SCROLLAMOUNT=10
LOOP=4> 2/1-2 </MARQUEE>
<TD VALIGN=bottom ALIGN=center
STYLE="font-size:2cm; border-left: #F00 dashed 16 " > 2/4
</TABLE>
</BODY>
</HTML>
