Секреты использования таблиц

Г Л А В А 1.

СЕКРЕТЫ ИСПОЛЬЗОВАНИЯ ТАБЛИЦ

В HTML-ДОКУМЕНТАХ

Многим создателям гипертекстовых обучающих программ очень нравится использовать таблицы на Web-страницах. Поэтому в первой главе мы постарались раскрыть разные аспекты применения таблиц в

HTML-документах.

Под таблицами в HTML-документах понимают совокупность ячеек. Каждая ячейка занимает определенное число строк и столбцов. Тег <TABLE> обозначает начало таблицы, тег </TABLE>– конец таблицы. <TR> и </TR> –описание строки таблицы, <TD> и </TD> – описание ячейки таблицы.

Документ, содержащий таблицу, в формате HTML имеет вид:

<HTML>

<HEAD>

<TITLE>DOCUMENT</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>Ячейка 1</TD><TD>Ячейка 2</TD>

</TR>

<TR>

<TD>Ячейка 3</TD><TD>Ячейка 4</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Можно опустить конечные теги </TR>,</TD>, но есть опасность утратить четкое представление структуры таблицы.

Для чего используют таблицы в HTML-документах? Для наглядности предлагаемой информации пользователю, для нахождения нужных сведений при минимальных временных затратах [4,9,10,14,15].

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

ПРИМЕР 1. Правила Брахмагупты [7. C. 63].

<HTML><head><title>TAB1</title></head><body><table border=1 ><caption align=top>ПРАВИЛА СЛОЖЕНИЯ И ВЫЧИТАНИЯ, ИЗЛОЖЕННЫЕ ИНДИЙСКИМ МАТЕМАТИКОМ БРАХМАГУПТОЙ В VII В.Н.Э.</caption><tr><th width=100> Современная запись<th width=300>Правила Брахмагупты<tr><td >

1. a+b=c<BR>2. (-a)+(-b)=-c<BR>3. a+(-b)=a-b<BR>4. a+(-a)=0<BR>5. 0+(-a)=-a

<td > Сумма двух имуществ есть имущество<BR> Сумма двух долгов есть долг<BR> Сумма имуществ и долга равна их разности<BR> Сумма имущества и равного долга равна нулю<BR> Сумма нуля и долга есть долг<BR> Сумма нуля и имущества есть имущество<BR> Долг, вычитаемый из нуля, становится имуществом<BR> Имущество, вычитаемое из нуля, становится долгом</table></body> </HTML>

Основные команды (теги), используемые

при написании HTML-документа

<HTML> – формат документа, тип документа;

<HEAD> – заголовок документа;

<TITLE> – название документа, имя документа;

<BODY> – текст документа, тело;

<BR> – простое окончание строки;

<TABLE> – задание и описание таблиц;

<TABLE BORDER=N> – рамка толщиной в N пикселей вокруг таблицы и непустых ячеек;

<CAPTION> – подпись к таблице;

<TR> – описание строки таблицы;

<TD> – описание ячейки таблицы;

<TH> – описание ячейки, содержащей подзаголовок части таблицы;

<TH WIDTH=N|”%”> – ширина ячейки-подзаголовка N пикселей или задается в процентах;

<TH HEIGHT=N|”%”> – высота ячейки-подзаголовка N пикселей или задается в процентах;

<TD WIDTH=N|“%”> – ширина ячейки N пикселей или задается в процентах;

<TD HEIGTH=N|“%”> – высота ячейки N пикселей или задается в процентах.

Комментарии

Задание заголовка (подзаголовка) ячейки осуществляется при помощи команды <TH>. По умолчанию заголовок выделяется жирным шрифтом и центрируется относительно ячейки таблицы. На рис. 1 представлен документ ТАВ1 после просмотра его в броузере.

Современная запись

Правила Брахмагупты

1. a+b=c 2. (-a)+(-b)=-c 3. a+(-b)=a-b 4. a+(-a)=0 5. 0+(-a)=-a 6. 0+a=a 7. 0-(-a)=a 8. 0-a=-a

Сумма двух имуществ есть имущество Сумма двух долгов есть долг Сумма имуществ и долга равна их разности Сумма имущества и равного долга равна нулю Сумма нуля и имущества есть имущество Сумма нуля и имущества есть имущество Долг, вычитаемый из нуля, становится имуществом Имущество, вычитаемое из нуля, становится долгом

Рис.1

ПРИМЕР 2. Подсчет фигур.

<table border=1><caption>Заполните пустые клетки таблицы

</caption><tr><th rowspan=2>Фигуры<th colspan=4>Цвет

<tr align=center><td>Красные<td>Синие<td>Зеленые<td>Всего

<tr align=center><td>Треугольники<td>25<td>15<td><td>60

<tr align=center><td>Квадраты<td>10<td><td>

<tr align=center> <td>Всего<td><td>50<td><td>125</table>

</body></html>

Основные команды (теги), используемые

Вопросы для повторения темы

«Секреты использования таблиц в HTML-документах»