Http://www.on-line-teaching.com/html/lsn015.html

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

1. С помощью Блокнота создадим в рабочем каталоге файл table1.htm, записав в этот файл следующий текст:

<HTML>

<HEAD>

<TITLE> Простейшая таблица-1</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>Этот текст-в ячейке таблицы</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Просмотрим получившийся документ с помощью MS Internet Explorer. Видно, что в окне программы просмотра какие-либо следы таблицы отсутствуют. Дело в том, что теги<TABLE>, <TR> и <TD> просто объявили о наличии соответственно таблицы, строки таблицы и клетки таблицы, но никак не определили их оформление. Для определения вида оформления объектов в тегах HTML используются так называемые атрибуты. Сделаем в тексте предыдущего документа некоторые изменения и сохраним в рабочем каталоге файл как table2.htm. Модифицированный текст документа:

<HTML> <HEAD> <TITLE> Простейшая таблица-2</TITLE> </HEAD> <BODY> <TABLE BORDER=3 WIDTH=50%><TR><TD>Этот текст-в ячейке таблицы</TD></TR></TABLE></BODY> </HTML>

Атрибут BORDER в теге <TABLE > объявляет о наличии рамки и задает ширину "рельефа" вокруг рамки таблицы. Атрибут WIDTH в данном случае определяет ширину таблицы в 50% от ширины окна программы просмотра.

Задание 1.2.1. Изменяя ширину окна программы просмотра пронаблюдайте за изменением ширины исследуемой таблицы.

Задание 1.2.2. Уберите из атрибута BORDER значение ширины "рельефа" (текст "=3"), сохранив документ под именем table2a.htm и посмотрите на результат изменений.

Задание 1.2.3. Уберите из тега <TABLE> атрибут WIDTH, сохраните это изменение в файле table2b.htm и посмотрите на результат (выбрав кнопку "Обновить" в панели инструментов программы просмотра). Убедитесь в том, что в этом случае размер ячейки автоматически подгоняется под длину строки.

Задание 1.2.4. По документу table3.htm рассмотрите адресацию ячеек в таблице


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: