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>
Эта пара тегов определяет текст каждой
ячейки таблицы.
При использовании этих тегов следует быть очень аккуратным,
иначе создание таблицы, состоящей из нескольких строк может
оказаться сложным делом.
Рассмотрим пример таблицы:
Имя | Команда | Победы/поражения | Очки | Ауты |
---|---|---|---|---|
Пит Шурек | Цинцинната | 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. Без этого слова ячейки будут автоматически выровнены, но сетки не будет. То есть наша созданная табличка без ключевого слова будет выглядеть следующим образом:
Имя | Команда | Победы/поражения | Очки | Ауты |
---|---|---|---|---|
Пит Шурек | Цинцинната | 16-2 | 2,73 | 194 |
Гидео Немо | Лос-Анджелес | 19-8 | 2,94 | 399 |
Грег Энгриус | Атланта | 24-6 | 2,21 | 275 |