Создание таблицы документа html

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Тэг <TH> используется для создания ячеек с заголовками.

Тэг <TD> - для обыкновенных ячеек с данными.

Таблицы - это основное средство управления размещением объектов на странице. Основные теги таблицы:

  • table. Этот тег определяет начало таблицы внутри документа.
  • tr. Этот тег строки таблицы (table row), он определяет строки, идущие слева направо в горизонтальном направлении.
  • td. Этот тег данных таблицы (table data) определяет отдельные ячейки. Тег ячейки таблицы и информация, содержащаяся в нем, определяют структуру таблицы по столбцам.

 

Приведём пример простейшей таблицы состоящий из двух строк и двух столбцов :

<html>
<head>
<title>Пример простейшей таблицы</title>
</head>
<BODY> <TABLE border>
<TR>
<TD>Ячейка 1 строки 1
<TD>Ячейка 2 строки 1
<TR>
<TD>Ячейка 1 строки 2
<TD>Ячейка 2 строки 2
</TABLE>
</body>
</html>

 

  • .align=x. Выравнивание таблицы на странице определяется значением этого атрибута В качестве x должно стоять left или right. Так как поумолчанию в броузерах производится выравнивание по левому краю, а для выравнивания таблиц по центру обычно используются другие теги, то единственно эффективное использование этого атрибута относится к случаю, когда вы хотите сместить всю таблицу к правому краю окна броузера.
  • border=x. Переменная x должна быть заменена числовым значением от 0 и более. Это значение определяет ширину видимой рамки вокруг таблицы. При создании макетов страниц x обычно будет задаваться равным 0.
  • cellspacing=x. Этот атрибут определяет интервал между отдельными ячейками таблицы (другими словами между видимыми столбцами). Параметр x должен принимать значения, большие ли равные 0. Это поможет получить пустое пространство между элементами, помещенными внутри ячеек.
  • cellpadding=x.Этот атрибут определяет расстояние от границ ячейки до помещенных в нее объектов. Он также используется для создания пустого пространства внутри каждой ячейки.
  • width=%x или width=x Чтобы задать ширину таблицы, вы можете указать либо число, соответствующее доле в процентах от общей ширины окна броузера, либо конкретное значение, которое будет обозначать конкретную ширину в пикселях. Выбор ширины таблицы чрезвычайно важен. Превышение максимума ширины в 595 пикселей может привести к тому, что при разрешении 640х480 страницу придется пролистывать горизонтально.

align=x Переменная x может иметь значения left, right или middle. Когда вы используете атрибут внутри ячейки таблицы, содержимое ячейки выравнивается в соответствии с атрибутом.

valign=x X принимает значения top, middle или bottom. При вертикальном выравнивании содержимое ячейки располагается в верхней части, нижней части или посередине ячейки.

  • colspan=x Здесь x это число столбцов, атрибут colspan заставляет текущую ячейку занимать несколько столбцов по ширине.

rowspan=x Здесь x это число строк, атрибут rowspan заставляет текущую ячейку занимать несколько строк по высоте.

 

Оформление HTML-документа. Формы, фреймы, нумерованные списки. Привести пример.

Нумерованные списки

<OL> 1.Вася

<LI>Вася 2.Петя

<LI>Петя 3.Коля

<LI>Коля

</OL>

изменение нумерации:

<OL TYPE=i START=3>

...

</OL> (вместо i - 1, i, I, a,A)

Фреймы

Фреймы представляют собой независимые области окна броузера. Использование фреймовых структур в HTML-документах, позволяет (в некоторых случаях) существенно упростить просмотр материала и навигацию в Web, за счет удобной организации окна броузера и отделения областей просмотра данных от областей управления документами.

Структура фреймовых HTML документов существенно отличается от привычных нам документов, рассмотренных в предыдущих главах. В фреймовых документах структурный элемент<BODY>...</BODY> заменяется набором фреймов, определяемым в контейнере <FRAMESET>...</FRAMESET>, и контейнером <NOFRAMES>...</NOFRAMES>, определяющим альтернативное содержимое документа для пользователей броузеров не поддерживающих фреймы.

Таким образом фреймовый HTML-документ имеет следующую структуру: