Таблицы

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

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

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

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

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

Тэги	Описание
<table> и </table>	Эти тэги охватывают таблицу. Тэг <table> сообщает браузеру, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER (получится <table border>), но подробней об этом позже.
<caption> и </caption>	Текст, отмеченный этими тэгами, выводится в виде названия таблицы. Для задания названия таблицы можно также применять тэги <tc> и </tc>.
<th> и </th>	Тэги отображают текст заголовка или строки столбца немного более крупным полужирным шрифтом.
<tr> и </tr>	Тэги, определяющие каждую строку таблицы. Тэг </tr> необязателен, но делает html-код более красивым и понятным.
<td> и </td>	Эта пара тэгов определяет текст каждой ячейки таблицы.

При использовании этих тэгов следует быть очень аккуратным, иначе создание таблицы, состоящей из нескольких строк, может оказаться сложным делом. Чтобы создать даже такую простую таблицу, как была приведена в качестве примера чуть выше (про бейсбол), понадобится довольно много строк html-кода. Теперь покажем, в качестве примера правильной таблицы, код той самой таблицы:

<table border="1"> <tr> <th align="center">Имя</th> <th align="center">Команда</th> <th align="center">Победы/поражения</th> <th align="center">Очки</th> <th align="center">Ауты</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>

Первый шаг - ввод инициализационного тэга таблицы:

<table> </table>

Чтобы ячейки таблицы были разделены тонкими линиями, добавим параметр border. Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не будет. Теперь начнем создавать ячейки, одну за другой. Сначала зададим строку:

<table border="1" > <tr> </tr> </table>

После этого зададим ячейки. Их у нас 5, соответственно 5 открытий и закрытий тэгов <td> и </td>

<table border="1"> <tr> <th> Имя </th> <th> Команда </th> <th>Победы/поражения</th> <th> Очки </th> <th> Ауты </th> </tr> </table>

Вот что получится в результате:

Имя

Команда

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

Очки

Ауты

Далее произведем центровку текста в таблице.

<table align="center" border="1"> <tr> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> </table>

Вот что получится в результате:

Имя Команда Победы/поражения Очки Ауты

Продолжим добавлять информацию:

<table align="center" border="1"> <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> </table>

Вот что получится в результате:

Имя Команда Победы/поражения Очки Ауты Пит Шурек Цинциннати 16-2 2,73

Далее таблица заполняется аналогично выше приведенному примеру.