 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Создание таблиц. Таблицы очень часто используют для позиционирования различных элементов на Web-странице
|
|
Таблицы очень часто используют для позиционирования различных элементов на Web-странице. Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов: <TR>...</TR> – описание строки таблицы и <TD>...</TD> – писание ячейки таблицы. По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце. Рассмотрим пример простейшей таблицы (вид HTML страницы представлен на рисунке 3):
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<TABLE border="2"> <!-- Начало таблицы -->
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки.
</TD>
<TD align="center">
Вторая ячейка первой строки.
</TD>
</TR>
<TR>
<td align="center">
Первая ячейка второй строки.
</TD>
<TD align="center">
Вторая ячейка второй строки.
</TD>
</TR>
</TABLE> <!-- конец таблицы -->
</BODY>
</HTML>
Рисунок 3 – HTML страница с таблицей
Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>. Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру. Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками. Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно. Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Рассмотрим пример таблицы, занимающей по ширине весь экран браузера:
<TABLE border="1" width="100%">
<CAPTION>Пример таблицы</CAPTION>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD>
</TR>
<TR>
<TD width="33%" rowspan="2" valign="middle">
Две ячейки, объединенные по вертикали
</TD>
<TD width="33%">
пo левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right">
пo правому краю
</TD>
</TR>
</TABLE>
Дата публикования: 2015-02-18; Прочитано: 273 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
