вернуться на главную страницу

1. 1. Как построить простую таблицу.

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

Важно использовать таблицы так, чтобы они не занимали попусту место на Web - cтранице. Благодаря наличию строк и столбцов таблицы удобны для сравнения и противопостановления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице.

Хорошая таблица делает Web - страницу информативной, аккуратной и организованной, неудачная разбивает ее и запутывает то, что Вы хотели сообщить.

Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги <TABLE> и </TABLE> обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация.

TЕГИ ОПИСАНИЕ
<TABLE> и </TABLE> Эти теги охватывают таблицу.
Тег <TABLE> cообщает броузерам, что далее следует описание таблицы. Если Вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER (получится <TABLE BORDER>)
<CAPTION> и </CAPTION> Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги <TC> и </TC>
<TH> и </TH> Теги отображают текст заголовка строки или столбца немного более крупным полужирным шрифтом
<TR> и </TR> Теги определяют каждую строку таблицы. Тег </TR> необязателен, но он делает Ваш HTML - код более полным и понятным.
<TD> и </TD> Эта пара тегов определяет текст каждой ячейки таблицы.


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

Рассмотрим пример таблицы:

Лучшие бейсбольные подающие 1997 года
Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинцинната 16-2 2,73 194
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег Энгриус Атланта 24-6 2,21 275

Текст вашей Web - страницы в Блокноте имеет следующий вид:

<HTML>

<TITLE>Таблица</TITLE>

...

<CENTER>

<TABLE BORDER>

<CAPTION ALIGN="CENTER">

Лучшие бейсбольные подающие 1997 года

</CAPTION>

<TR>

<TH>Имя</TH>

<TH>Команда</TH>

<TH>Победы/поражения</TH>

<TH>Очки</TH>

<TH>Ауты</TH>

</TR>

<TR>

<TD>Пит Шурек</TD>

<TD>Цинцинната</TD>

<TD>16-2</TD>

<TD>2,73</TD>

<TD>194</TD>

</TR>

<TR>

<TD>Гидео Немо</TD>

<TD>Лос-Анджелес</TD>

<TD>19-8</TD>

<TD>2,94</TD>

<TD>399</TD>

</TR>

<TR>

<TD>Грег Энгриус</TD>

<TD>Атланта</TD>

<TD>24-6</TD>

<TD>2,21</TD>

<TD>275</TD>

</TR>

</TABLE>

</CENTER>

...

</HTML>

И так мы только, что создали с Вами простую табличку.

Чтобы все ячейки таблицы были разделены тонкими линиями, добавьте в тег <TABLE> ключевое слово BORDER=1. Без этого слова ячейки будут автоматически выровнены, но сетки не будет. То есть наша созданная табличка без ключевого слова будет выглядеть следующим образом:

Лучшие бейсбольные подающие 1997 года
Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинцинната 16-2 2,73 194
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег Энгриус Атланта 24-6 2,21 275



вернуться на главную страницу