таблицы лаб 4

При создании веб страниц очень часто необходимо представить некоторое содержимое

страницы в виде таблиц. Иногда таблицы используют для создания структуры страницы.

При создании веб страниц очень часто необходимо представить некоторое содержимое

страницы в виде таблиц. Иногда таблицы используют для создания структуры страницы.

За создание таблиц в HTML отвечает тег <table> и закрывающий тег </table>.

Таблицы состоят из строчек и ячеек. Поэтому для того чтобы создать таблицу нам

необходимы еще два тега это тег <tr></tr> который отвечает за создание строк и тег <td></td> отвечающий за создание ячеек.

За создание таблиц в HTML отвечает тег <table> и закрывающий тег </table>.

Таблицы состоят из строчек и ячеек. Поэтому для того чтобы создать таблицу нам

необходимы еще два тега это тег <tr></tr> который отвечает за создание строк и тег <td></td> отвечающий за создание ячеек.

<html> <head> <title>Таблица</title> <table> <tr><td>1 - ячейка </td> <td>2 - ячейка</td> </tr> <tr> <td>3 - ячейка</td> <td>4 - ячейка</td> </tr> </table> </head> </html>

<html> <head> <title>Таблица</title> <table> <tr><td>1 - ячейка </td> <td>2 - ячейка</td> </tr> <tr> <td>3 - ячейка</td> <td>4 - ячейка</td> </tr> </table> </head> </html>

Результат в браузереРезультат в браузере

Способ разметки страниц таблицами делает лучшим на сегодняшний день инструментом для Web-дизайнера. Имеют место еще два способа заполнения страниц - с использованием программ-конструкторов и с помощью фреймов .Первые имея преимущества в простоте использования (объекты позиционируются пользователем визуально без знания языка HTML) имеют существенный недостаток - они создают страницы только под конкретное расширения экрана. На других расширениях страница будет выглядеть некорректно. С фреймами обстоят дела еще хуже - их не "видят" поисковые машины. Поэтому почти всегда применяют табличный метод.

TABLE - создаёт таблицу.<TABLE>...</TABLE> Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

TABLE - создаёт таблицу.<TABLE>...</TABLE> Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

CAPTION - задаёт заголовок для таблицы.<CAPTION>...</CAPTION> Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

CAPTION - задаёт заголовок для таблицы.<CAPTION>...</CAPTION> Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

TR - задаёт строку таблицы.<TR>...</TR> Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

TR - задаёт строку таблицы.<TR>...</TR> Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

TH - задаёт ячейку таблицы, заголовок столбца.<TH>...</TH> Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

TH - задаёт ячейку таблицы, заголовок столбца.<TH>...</TH> Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.TD - задаёт простую ячейку таблицы с данными.<TD>...</TD> Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается.

TD - задаёт простую ячейку таблицы с данными.<TD>...</TD> Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается.

Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle.

Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle.

Элемент TABLEВ языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого элемента задают параметры для всей таблицы целиком.

Элемент TABLEВ языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого элемента задают параметры для всей таблицы целиком.

Атрибуты элемента TABLE:Атрибуты элемента TABLE:

BORDER- ширина рамки вокруг всей таблицы. Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

BORDER- ширина рамки вокруг всей таблицы. Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN- определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left. Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали.

ALIGN- определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left. Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали.

VALIGN- должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

VALIGN- должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP- данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

NOWRAP- данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

COLSPAN- указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

COLSPAN- указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

ROWSPAN- указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

ROWSPAN- указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

COLSPEC- данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

COLSPEC- данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.

CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.

WIDTH- определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

WIDTH- определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

BORDER COLOR - задание цвета рамкиBORDER COLOR - задание цвета рамки

BORDER COLORLIGHT - задание цвета для рамки с тенью (псевдо трехмерная графика). Используется вместе с атрибутами BORDERCOLORDARK и BORDER

BORDER COLORLIGHT - задание цвета для рамки с тенью (псевдо трехмерная графика). Используется вместе с атрибутами BORDERCOLORDARK и BORDER

BORDER COLORDARK - задание цвета для рамки с тенью (псевдо трехмерная графикаBORDER COLORDARK - задание цвета для рамки с тенью (псевдо трехмерная графика

COLS - число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц.COLS - число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц.

FRAME - определяет метод отрисовки рамкиFRAME - определяет метод отрисовки рамки

VOID - Убрать наружную часть рамки.ABOVE - Показывает верхнюю границу таблицы.BELOW - Показывает нижнюю границу таблицы.HSIDES - Показывает верхнию и нижнюю границу таблицы.LHS - Показывает левую границу таблицы.RHS - Показывает правую границу таблицы.VSIDES - Показывает левую и правую границу таблицы.BOX - Показывает полную рамку таблицы.BORDER - Показывает полную рамку таблицы.RULES-определяет как будут показаны разделительные линии ( внутренние границы ) таблицы.

VOID - Убрать наружную часть рамки.ABOVE - Показывает верхнюю границу таблицы.BELOW - Показывает нижнюю границу таблицы.HSIDES - Показывает верхнию и нижнюю границу таблицы.LHS - Показывает левую границу таблицы.RHS - Показывает правую границу таблицы.VSIDES - Показывает левую и правую границу таблицы.BOX - Показывает полную рамку таблицы.BORDER - Показывает полную рамку таблицы.RULES-определяет как будут показаны разделительные линии ( внутренние границы ) таблицы.

NONE - Устраняет все границы внутри таблицы.GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUPROWS – Показывает горизонтальные границы между всеми рядами таблицы.COLS – Показывает вертикальные границы между всеми колонками таблицы.ALL - Показывает все границы.

NONE - Устраняет все границы внутри таблицы.GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUPROWS – Показывает горизонтальные границы между всеми рядами таблицы.COLS – Показывает вертикальные границы между всеми колонками таблицы.ALL - Показывает все границы.

Атрибут frame задаёт тип рамки вокруг таблицы. Допустимы следующие значения:Атрибут frame задаёт тип рамки вокруг таблицы. Допустимы следующие значения:

void - границ нет (это значение по умолчанию).

above - только верхняя часть границы.

below - только нижняя часть.

hsides - только нижняя и верхняя части.

vsides - только левая и правая части.

lhs - только левая часть.

rhs - только правая часть.

box - все четыре части.

void - границ нет (это значение по умолчанию).

above - только верхняя часть границы.

below - только нижняя часть.

hsides - только нижняя и верхняя части.

vsides - только левая и правая части.

lhs - только левая часть.

rhs - только правая часть.

box - все четыре части.

Атрибут rules задаёт внутренние границы таблицы (между ячейками). Атрибут rules задаёт внутренние границы таблицы (между ячейками).

Допустимы следующие значения:Допустимы следующие значения:

none - нет границ между ячейками (это значение по умолчанию).rows - только между строками.cols - только между столбцами.all - отображаются все границы между строками и столбцами.

none - нет границ между ячейками (это значение по умолчанию).rows - только между строками.cols - только между столбцами.all - отображаются все границы между строками и столбцами.

Элемент CAPTION - название таблицы

У таблицы может быть название. Оно не принадлежит непосредственно к табличным данным, а располагается перед

таблицей или после неё. В HTML название таблицы задаётся при помощи элемента CAPTION, который должен находиться внутри элемента TABLE. У элемента CAPTION есть один атрибут align,

позволяющий задать его расположение: над таблицей (top) или под таблицей (bottom).

Элемент CAPTION - название таблицы

У таблицы может быть название. Оно не принадлежит непосредственно к табличным данным, а располагается перед

таблицей или после неё. В HTML название таблицы задаётся при помощи элемента CAPTION, который должен находиться внутри элемента TABLE. У элемента CAPTION есть один атрибут align,

позволяющий задать его расположение: над таблицей (top) или под таблицей (bottom).

Пример элемента CAPTION

<TABLE><CAPTION align="bottom">Название таблицы</CAPTION>

Код строк и столбцов таблицы</TABLE>

Пример элемента CAPTION

<TABLE><CAPTION align="bottom">Название таблицы</CAPTION>

Код строк и столбцов таблицы</TABLE>

Элемент TR - строки таблицы В языке HTML таблицы формируются построчно. Элемент TR создаёт строку таблицы, а его атрибуты задают параметры для всех ячеек в строке.

Элемент TR - строки таблицы В языке HTML таблицы формируются построчно. Элемент TR создаёт строку таблицы, а его атрибуты задают параметры для всех ячеек в строке.

Атрибуты для элемента TR:Атрибуты для элемента TR:

Align

left - выравнивание данных в ячейках строки по левому краю (это значение по умолчанию)

center - выравнивание данных по центру (это значение по умолчанию для заголовков столбцов таблиц - TH)

right - выравнивание данных по правому краю

Align

left - выравнивание данных в ячейках строки по левому краю (это значение по умолчанию)

center - выравнивание данных по центру (это значение по умолчанию для заголовков столбцов таблиц - TH)

right - выравнивание данных по правому краю

Пример,align="center"

Пример,align="center"

Valign

top - данные ячейки сдвигаются вверх.

middle - данные ячейки центрируются вертикально (это значение по умолчанию)

bottom - данные в ячейке сдвигаются вниз.

Valign

top - данные ячейки сдвигаются вверх.

middle - данные ячейки центрируются вертикально (это значение по умолчанию)

bottom - данные в ячейке сдвигаются вниз.

Пример,valign="top"

Пример,valign="top"

bgcolor-устанавливает цвет фона для строки таблицы

Пример, bgcolor="green"

bgcolor-устанавливает цвет фона для строки таблицы

Пример, bgcolor="green"

Элементы TD и TH - ячейки таблицы

В HTML внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки столбцов (создаются элементом TH) и обычные ячейки (создаются элементом TD). Элементы TD и TH обязательно должны помещаться между открывающим и закрывающим тегами элемента TR, которые в свою очередь помещаются между тегами <TABLE> и </TABLE>.

Элементы TD и TH - ячейки таблицы

В HTML внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки столбцов (создаются элементом TH) и обычные ячейки (создаются элементом TD). Элементы TD и TH обязательно должны помещаться между открывающим и закрывающим тегами элемента TR, которые в свою очередь помещаются между тегами <TABLE> и </TABLE>.

Элемент TD от элемента TH отличается лишь визуально в окне браузера. Содержимое элемента TH выравнивается по центру и отображается жирным шрифтом, так как заголовки столбцов принято оформлять именно так. Теги TD и TH, также как и TR, могут иметь свои атрибуты:

Элемент TD от элемента TH отличается лишь визуально в окне браузера. Содержимое элемента TH выравнивается по центру и отображается жирным шрифтом, так как заголовки столбцов принято оформлять именно так. Теги TD и TH, также как и TR, могут иметь свои атрибуты:

NOWRAP-подавляет перенос слов .Эквивалентно использованию непрерывных пробелов вместо обычных пробелов в пределах содержимого ячейки

ROWSPAN-число строк, перекрываемых ячейкой .По умолчанию 1.

COLSPAN - число столбцов, перекрываемых ячейкой .По умолчанию 1.

COLSPEC- ширина колонок в символах или в процентах .

Например, COLSPEC="20%"

Например, COLSPEC="20%"

ALIGN- горизонтальное выравнивание данных в ячейке ALIGN- горизонтальное выравнивание данных в ячейке

Атрибуты:

• LEFT• CENTER• RIGHT• JUSTIFY • CHAR

Атрибуты:

• LEFT• CENTER• RIGHT• JUSTIFY • CHAR

По умолчанию LEFT или атрибут ALIGN во

включающем элементе TR.

Если задано ALIGN=”CHAR”, то задается свойство

CHAR=”.”, с указанием относительно какого

символа выравнивать.Свойство

CHAROFF=Length заставляет сдвигать

ячейки, не содержащие заданного символа

VALIGN-вертикальное выравнивание данных в ячейке VALIGN-вертикальное выравнивание данных в ячейке

Атрибуты:

• TOP• MIDDLE• BOTTOM• BASELINE

Атрибуты:

• TOP• MIDDLE• BOTTOM• BASELINE

Перекрывается атрибутом VALIGN во


Перекрывается атрибутом VALIGN во


WIDTH- ширина ячейки в пикселях WIDTH- ширина ячейки в пикселях

Броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце.

Броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце.

HEIGHT-высота ячейки в пикселях

Броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке

Броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке

BACKGROUND,BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK-аналогично атрибутам TABLE.BACKGROUND,BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK-аналогично атрибутам TABLE.

Примеры html - кодов и отображение результатов в браузере

Обрамление таблицы документа htmlОбрамление таблицы документа html

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.

По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

Пример,

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>

Пример,

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>


Заголовок таблицы документа htmlЗаголовок таблицы документа html

Для создания заголовка таблицы служит тэг <CAPTION>.По умолчанию браузер располагает заголовок таблицы по центру над ней.

При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

Для создания заголовка таблицы служит тэг <CAPTION>.По умолчанию браузер располагает заголовок таблицы по центру над ней.

При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

Пример:

<table border="1"><caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td> </tr></table>

Пример:

<table border="1"><caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td> </tr></table>

Заголовок таблицыЗаголовок таблицы

Отображение в браузереОтображение в браузере

Группирование столбцов документа htmlГруппирование столбцов документа html

Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>. Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.

Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные.

Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные.

Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

Пример:

<table border="1"><colgroup span="1" style=="color:red"></colgroup><colgroup span="2"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th> </tr> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr>

<tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr></table><br><table border="1"><col span="1" style="color:green"><col span="2" style="color:red"> <tr><th>Товар</th><th>Цена</th><th>Кол-во</th>

</tr> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr>

<tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr></table>

12

34


Группирование строк документа htmlГруппирование строк документа html

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>. Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные. <TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

Пример,

<table border="1"><thead style="color:green"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th> </tr></thead> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr> <tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr><tfoot> <tr>

Пример,

<table border="1"><thead style="color:green"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th> </tr></thead> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr> <tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr><tfoot> <tr>

<td colspan="3" align="center">Итоговая строка</td></tr></tfoot></table>

<td colspan="3" align="center">Итоговая строка</td></tr></tfoot></table>


Использование в таблице фонового цвета или фонового изображенияИспользование в таблице фонового цвета или фонового изображения

<html><body><h4>Фоновый цвет (bgcolor):</h4><table border="1" bgcolor="red"><tr> <td>Первая </td> <td>Строка </td></tr> <tr> <td>Вторая </td> <td>Строка </td></tr></table>

<html><body><h4>Фоновый цвет (bgcolor):</h4><table border="1" bgcolor="red"><tr> <td>Первая </td> <td>Строка </td></tr> <tr> <td>Вторая </td> <td>Строка </td></tr></table>

<h4>Фоновое изображение (background):</h4><table border="1"

background="bg.jpg"><tr>

<td>Первая</td> <td>Строка</td>

</tr> <tr>

<td>Вторая </td> <td>Строка </td>

</tr></table></body></html>

<h4>Фоновое изображение (background):</h4><table border="1"

background="bg.jpg"><tr>

<td>Первая</td> <td>Строка</td>

</tr> <tr>

<td>Вторая </td> <td>Строка </td>

</tr></table></body></html>


Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

<HTML><BODY><CENTER><TABLE CELLPADDING="10" CELLSPACING="0"BORDER="16"><TR><TD ALIGN="center"><H2>Харьковский национальный экономический университет</H2><H3>Добро пожаловать!</H3><TABLE BORDER WIDTH="100%"><TR><TD ALIGN="center"><I>Учебный курс"Основы WEB-мастеринга"</I></TD></TR></TABLE></TD></TR></TABLE></CENTER></BODY></HTML>

<HTML><BODY><CENTER><TABLE CELLPADDING="10" CELLSPACING="0"BORDER="16"><TR><TD ALIGN="center"><H2>Харьковский национальный экономический университет</H2><H3>Добро пожаловать!</H3><TABLE BORDER WIDTH="100%"><TR><TD ALIGN="center"><I>Учебный курс"Основы WEB-мастеринга"</I></TD></TR></TABLE></TD></TR></TABLE></CENTER></BODY></HTML>


Вложенные таблицы: таблица ABCD внутри таблицы 123456Вложенные таблицы: таблица ABCD внутри таблицы 123456

<TABLE BORDER><TR>  <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR>  <TD>A</TD> <TD>B</TD> </TR> <TR>  <TD>C</TD> <TD>D</TD> </TR> </TABLE></TD></TR>

<TABLE BORDER><TR>  <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR>  <TD>A</TD> <TD>B</TD> </TR> <TR>  <TD>C</TD> <TD>D</TD> </TR> </TABLE></TD></TR>

<TR> <TD>4</TD> <TD>5</TD> <TD>6</TD>

</TR></TABLE>

Результат в браузереРезультат в браузереТаблица с рамкой, шириной 10Таблица с рамкой, шириной 10

<TABLE BORDER=10><TR> <TD> 1</TD> <TD> 2</TD>

</TR><TR> <TD> 3</TD> <TD> 4</TD>

</TR></TABLE>

<TABLE BORDER=10><TR> <TD> 1</TD> <TD> 2</TD>

</TR><TR> <TD> 3</TD> <TD> 4</TD>

</TR></TABLE>


Пример,<table width="400" height="100" border="1" align="center" bgcolor="#FFF8D2"><tr><td>ряд 1 ячейка1</td><td align="center" valign="top">ряд1 ячейка2</td>

Пример,<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>

</tr><tr>

<td align="center" valign="bottom">ряд 2 ячейка 1</td><td align="right" valign="middle" bgcolor="#33FF99">ряд 2 ячейка 2</td></tr></table>

<td align="center" valign="bottom">ряд 2 ячейка 1</td><td align="right" valign="middle" bgcolor="#33FF99">ряд 2 ячейка 2</td></tr></table>

Education

таблицы лаб 4