2. При создании веб страниц очень часто
необходимо представить некоторое содержимое
страницы в виде таблиц. Иногда таблицы
используют для создания структуры страницы.
За создание таблиц в HTML отвечает тег
<table> и закрывающий тег </table>. Таблицы
состоят из строчек и ячеек. Поэтому для того
чтобы создать таблицу нам необходимы еще
два тега это тег <tr></tr> который отвечает за
создание строк и тег <td></td> отвечающий за
создание ячеек.
4. Способ разметки страниц таблицами
делает лучшим на сегодняшний день
инструментом для Web-дизайнера.
Имеют место еще два способа
заполнения страниц - с
использованием программконструкторов и с помощью
фреймов .Первые имея
преимущества в простоте
использования (объекты
позиционируются пользователем
визуально без знания языка HTML)
имеют существенный недостаток они создают страницы только под
конкретное расширения экрана. На
других расширениях страница будет
выглядеть некорректно. С фреймами
обстоят дела еще хуже - их не
"видят" поисковые машины. Поэтому
почти всегда применяют табличный
метод.
5. TABLE - создаѐт таблицу.
<TABLE>...</TABLE>
Это основные тэги, описывающие
таблицу. Все элементы таблицы должны
находиться внутри этих двух тэгов. По
умолчанию таблица не имеет обрамления и
разделителей. Обрамление добавляется
атрибутом BORDER.
CAPTION - задаѐт заголовок для таблицы.
<CAPTION>...</CAPTION>
Данный тэг описывает название таблицы (подпись). Тэг <CAPTION>
должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания
какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут
ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN
определяет, где - сверху или снизу таблицы - будет поставлена подпись.
Подпись всегда центрирована в рамках ширины таблицы.
6. TR - задаѐт строку таблицы.
<TR>...</TR>
Количество строк таблицы определяется количеством встречающихся
пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN,
которые описывают визуальное положение содержимого строк в таблице.
TH - задаѐт ячейку таблицы, заголовок
столбца.
<TH>...</TH>
Ячейка заголовка таблицы имеет
ширину всей таблицы; текст в данной ячейке
имеет атрибут BOLD и ALIGN=center.
TD - задаѐт простую ячейку таблицы с
данными.
<TD>...</TD>
Описывает стандартную ячейку
таблицы. Ячейка таблицы может быть
описана только внутри строки таблицы.
Каждая ячейка должна быть
пронумерована номером колонки, для
которой она описывается.
Расположение данных в ячейке по
умолчанию определяется атрибутами
ALIGN=left и VALIGN=middle.
7. Элемент TABLE
В языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы
должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого
элемента задают параметры для всей таблицы целиком.
Атрибуты элемента TABLE:
BORDER- ширина рамки вокруг всей таблицы.
Данный атрибут используется в тэге TABLE. Если данный атрибут
присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы
вцелом. BORDER может принимать числовое значение, определяющее ширину
границы,
например
BORDER=3.
ALIGN- определяет способ горизонтального выравнивания таблицы на
странице. Возможные значения: left, center, right. Значение по умолчанию - left.
Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он
определяет положение подписи для таблицы (сверху или снизу). По умолчанию
ALIGN=top.
Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он
управляет положением данных в ячейках по горизонтали.
8. VALIGN- должен определять способ вертикального выравнивания для
содержимого таблицы. Возможные значения: top, bottom, middle. Данный
атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет
вертикальное размещение данных в ячейках. Может принимать значения top
(вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки
прижаты кверху).
NOWRAP- данный атрибут говорит
о том, что данные в ячейке не могут
логически разбиваться на несколько
строк и должны быть представлены
одной строкой.
COLSPAN- указывает, какое
количество ячеек будет объединено
по горизонтали для указанной
ячейки. По умолчании - 1.
ROWSPANуказывает,
какое
количество ячеек будет объединено
по вертикали для указанной ячейки.
По умолчании - 1.
9. COLSPEC- данный параметр позволяет
задавать фиксированную ширину колонок
либо в символах, либо в процентах,
например COLSPEC="20%".
BGCOLOR - определяет цвет фона ячеек
таблицы. Задается либо RGB-значением в
шестнадцатиричной системе, либо одним
из 16 базовых цветов.
BACKGROUND - позволяет заполнить фон
таблицы рисунком. В качестве значения
необходимо указать URL рисунка.
CELLPADDING - определяет расстояние (в
пикселах) между рамкой каждой ячейки
таблицы и содержащимся в ней материалом.
CELLSPACING - определяет расстояние (в
пикселах) между границами соседних
ячеек.
10. WIDTH- определяет ширину таблицы. Ширина задается либо в пикселах, либо
в процентном отношении к ширине окна браузера. По умолчанию этот
параметр определяется автоматически в зависимости от объема
содержащегося в таблице материала.
HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах,
либо в процентном отношении к высоте окна браузера. По умолчанию этот
параметр определяется автоматически в зависимости от объема
содержащегося в таблице материала.
BORDER COLOR - задание цвета рамки
BORDER COLORLIGHT - задание цвета для рамки с тенью (псевдо
трехмерная
графика).
Используется
вместе
с
атрибутами
BORDERCOLORDARK и BORDER
BORDER COLORDARK - задание цвета для рамки с тенью (псевдо
трехмерная графика
COLS - число столбцов в таблице. Данный атрибут ускоряет
вывод таблицы, что особенно заметно для больших таблиц.
FRAME - определяет метод отрисовки рамки
11. VOID - Убрать наружную часть рамки.
ABOVE - Показывает верхнюю границу
таблицы.
BELOW - Показывает нижнюю границу
таблицы.
HSIDES - Показывает верхнию и
нижнюю границу таблицы.
LHS - Показывает левую границу
таблицы.
RHS - Показывает правую границу
таблицы.
VSIDES - Показывает левую и правую
границу таблицы.
BOX - Показывает полную рамку
таблицы.
BORDER - Показывает полную рамку
таблицы.
RULES-определяет как будут показаны
разделительные линии ( внутренние
границы ) таблицы.
12. NONE - Устраняет все границы
внутри таблицы.
GROUPS - Показывает
горизонтальные границы между
всеми группами таблицы.
GROUPS определены элементами
THEAD, TBODY, TFOOT, и
COLGROUP
ROWS – Показывает
горизонтальные границы между
всеми рядами таблицы.
COLS – Показывает вертикальные
границы между всеми колонками
таблицы.
ALL - Показывает все границы.
13. Атрибут frame задаѐт тип рамки вокруг
таблицы. Допустимы следующие значения:
void - границ нет (это значение по умолчанию).
above - только верхняя часть границы.
below - только нижняя часть.
hsides - только нижняя и верхняя части.
vsides - только левая и правая части.
lhs - только левая часть.
rhs - только правая часть.
box - все четыре части.
14. Атрибут rules задаѐт внутренние границы таблицы (между ячейками).
Допустимы следующие значения:
none - нет границ между ячейками (это значение по умолчанию).
rows - только между строками.
cols - только между столбцами.
all - отображаются все границы между строками и столбцами.
15. Элемент CAPTION - название таблицы
У таблицы может быть название. Оно не принадлежит
непосредственно к табличным данным, а располагается перед
таблицей или после неѐ. В HTML название таблицы задаѐтся при
помощи элемента CAPTION, который должен находиться внутри
элемента TABLE. У элемента CAPTION есть один атрибут align,
позволяющий задать его расположение: над таблицей (top) или под
таблицей (bottom).
Пример элемента CAPTION
<TABLE>
<CAPTION align="bottom">Название таблицы</CAPTION>
Код строк и столбцов таблицы
</TABLE>
16. Элемент TR - строки таблицы
В языке HTML таблицы формируются построчно. Элемент TR создаѐт
строку таблицы, а его атрибуты задают параметры для всех ячеек в строке.
Атрибуты для элемента TR:
Align
left - выравнивание данных в ячейках строки по левому краю (это
значение по умолчанию)
center - выравнивание данных по центру (это значение по умолчанию
для заголовков столбцов таблиц - TH)
right - выравнивание данных по правому краю
Пример,
align="center"
17. Valign
top - данные ячейки сдвигаются вверх.
middle - данные ячейки центрируются вертикально (это значение по
умолчанию)
bottom - данные в ячейке сдвигаются вниз.
Пример,
valign="top"
18. bgcolor-устанавливает цвет фона для строки таблицы
Пример,
bgcolor="green"
Элементы TD и TH - ячейки таблицы
В HTML внутри строк таблиц находятся
ячейки. Они бывают двух типов: заголовки
столбцов (создаются элементом TH) и обычные
ячейки (создаются элементом TD). Элементы TD и
TH обязательно должны помещаться между
открывающим и закрывающим тегами элемента
TR, которые в свою очередь помещаются между
тегами <TABLE> и </TABLE>.
19. Элемент TD от элемента TH отличается лишь визуально в окне браузера.
Содержимое элемента TH выравнивается по центру и отображается жирным
шрифтом, так как заголовки столбцов принято оформлять именно так. Теги TD
и TH, также как и TR, могут иметь свои атрибуты:
NOWRAP-подавляет перенос слов .
Эквивалентно использованию непрерывных пробелов вместо обычных
пробелов в пределах содержимого ячейки
ROWSPAN-число строк, перекрываемых ячейкой .По умолчанию 1.
COLSPAN - число столбцов, перекрываемых ячейкой .По умолчанию 1.
COLSPEC- ширина колонок в символах или в процентах
.
Например,
COLSPEC="20%"
20. ALIGN- горизонтальное выравнивание данных в ячейке
Атрибуты:
•LEFT
•CENTER
•RIGHT
•JUSTIFY
•CHAR
По умолчанию LEFT или
атрибут ALIGN во
включающем элементе
TR.
Если задано
ALIGN=”CHAR”, то
задается свойство
CHAR=”.”, с указанием
относительно какого
символа выравнивать.
Свойство
CHAROFF=Length
заставляет сдвигать
ячейки, не содержащие
заданного символа
21. VALIGN-вертикальное выравнивание данных в ячейке
Атрибуты:
•TOP
•MIDDLE
•BOTTOM
•BASELINE
Перекрывается
атрибутом VALIGN во
включающем элементе
TR.
WIDTH- ширина ячейки в пикселях
Броузер использует это значение, если оно
не конфликтует с требованиями ширины в
соседних ячейках в том же самом столбце.
HEIGHT-высота ячейки в пикселях
Броузер использует это значение, если оно
не конфликтует с требованиями высоты
для других ячеек в той же самой строке
22. BACKGROUND,BGCOLOR,
BORDERCOLOR,
BORDERCOLORLIGHT,
BORDERCOLORDARK-аналогично атрибутам TABLE.
Примеры html - кодов и отображение результатов в браузере
Обрамление таблицы документа html
Для того, чтобы сделать видимой границы таблицы, служит атрибут
BORDER тэга <TABLE>.
Определяя рамку таблицы, надо указать толщину ее внешних линий в
пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы,
необходимо воспользоваться атрибутом CELLSPACING.
По умолчанию браузер отображает рамку таблицы темно-серым цветом.
Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.
23. Пример,
HTML-код:
<table border="2" cellspacing="5" bordercolor="#0ff00f">
<tr>
<td>1</td>
Результат в браузере
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>м
<td>5</td>
<td>6</td>
</tr>
</table>
24. Заголовок таблицы документа html
Для создания заголовка таблицы служит тэг <CAPTION>.
По умолчанию браузер располагает заголовок таблицы по центру над ней.
При помощи атрибута ALIGN со значением bottom можно разместить
заголовок под таблицей.
Пример:
<table border="1">
<caption> Заголовок таблицы </caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
26. Группирование столбцов документа html
Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.
Дескриптор
<COLGROUP>
создает структурную группу столбцов,
которая
выделяет
множество
логически однородных ячеек. Так
одна структурная группа может
охватывать
ячейки
заголовков
столбцов,
а
другая
ячейки,
содержащие данные.
Дескриптор <COL> предназначен для
формирования
неструктурных
групп
столбцов, которые делят таблицу на разделы,
не имеющих отношения к структуре. Это
удобно в том случае, когда не все столбцы
содержат информацию одного типа.
29. Группирование строк документа html
Для группирования строк таблицы служат тэги <THEAD>, <TBODY>,
<TFOOT>.
<THEAD> - нужен для создания группы заголовков для столбцов таблицы.
Этот дескриптор допускается использовать в пределах таблицы только одни
раз.
<TBODY> - применяется для создания одной или нескольких групп строк
таблицы, содержащих основные данные.
<TFOOT> - позволяет создать группу строк для представления
информации о суммах или итогах, располагаемую в нижней части таблицы.
Этот дескриптор допускается использовать в пределах таблицы только одни
раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.
34. Таблицы хороши тем, что при желании
можно сделать их границы невидимыми.
Это позволяет с помощью тега <ТАВLЕ>
красиво размещать на странице текст и
графику. Пока тег <ТАВLЕ> остается
единственным
мощным
средством
форматирования в HTML. Дизайнеры Webстраниц сейчас обладают практически той
же свободой в отношении использования
"пустого пространства", что и создатели
печатных страниц. Таблицы лучше всего
помогают
отойти
от
иерархического
размещения текста на Web-страницах.
38. Результат в браузере
Таблица с рамкой, шириной 10
<TR>
<TR>
<TABLE BORDER=10>
<TD> 1</TD> <TD> 2</TD>
</TR>
<TD> 3</TD> <TD> 4</TD>
</TR>
</TABLE>
Результат в браузере
39. Пример,
<!-- задаем ширину , высоту, рамку,
выравнивание по центру и фоновый цвет
всей таблицы-->
<table width="400" height="100" border="1"
align="center" bgcolor="#FFF8D2">
<tr>
<!-- эту ячейку оставляем по умолчанию-->
<td>ряд 1 ячейка1</td>
<!-- содержимое горизонтально
выравниваем по центру, вертикально прижимаем к верху-->
<td align="center" valign="top">ряд1
ячейка2</td>
</tr>
<tr>
<!-- содержимое горизонтально
выравниваем по центру, вертикально прижимаем к низу-->
<td align="center"
valign="bottom">ряд 2 ячейка
1</td>
<!-- содержимое горизонтально
выравниваем по правому краю,
вертикально - посередине, и
меняем фоновый цвет-->
<td align="right" valign="middle"
bgcolor="#33FF99">ряд 2 ячейка
2</td>
</tr>
</table>
