+'??MasteR??'+

Таблицы

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

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

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

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

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

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

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

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

<td align="center"><b>Команда</b></td>

<td align="center"><b>Победы/поражения</b></td>

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

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

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

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

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

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

Уф! И это все для маленькой таблички! На самом деле, елси вы терпеливо и аккуратно вводите теги, создаете таблицу, оказывается, весь процесс не так уж и сложен. Теперь давайте все по порядку.

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

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

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

<td>Имя</td>

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

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

<td>Очки</td>

<td>Ауты</td>
</tr>
</table>

В итоге мы получим это:

Имя

Команда

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

Очки

Ауты

Не очень-то и смотрится без центрирования таблицы. Давайте исправимся?

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

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

В итоге мы получим это:

Имя

Команда

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

Очки

Ауты

Теперь таблица по-середине, но было-бы лучше если-бы были и другие строки, а верхняя, в качестве озаглавляющей, была выделена тегами <th> и </th> (чуть более жирнее):

<th>Имя</th>

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

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

<th>Очки</th>

<th>Ауты</th>
</tr>
<tr>

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

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

В итоге мы получим это:

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

В принципе все, основные команды управления таблицами вы уже знаете.

Расширенные возможности форматирования таблиц

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

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

Объединение нескольких строк в одну ячейку

Если вы будете часто применять таблицы, то непременно столкнетесь с ситуацией, когда какая-либо ячейка должна занимать несколько строк таблицы. Здесь вам пригодится ключевое слово ROWSPAN, которое добавляется в тег <td> заданной ячейки. Чтобы ячейка занимала две строки вместо одной, замените ваш код, например <td>текст вашей простой ячейки</td> на <td rowspan=2>Вас расширеный текст</td>. Теперь при отображении таблицы ячейка с ключевым словом ROWSPAN займет две строки. Так можно изменить бейсбольную таблицу:

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

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

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

<td rowspan=2>Цинциннати</td>

В итоге мы получим это:

Имя	Команда	Победы/поражения	Очки	Ауты
Пит Шурек	Цинциннати	16-2	2,73	194
Хосе Рио	Цинциннати	28-2	1,92	199

Мы видим что 2 ячейки с параметром "Команда" объеденились в одну.

Объединение нескольких столбцов в одну ячейку

Подобно тому, как ROWSPAN распространяет ячейку на несколько строк, COLSPAN "раздвигает" ее на несколько столбцов. С помощью ключевого слова COLSPAN вы можете распространить ячейку на любое количество столбцов. Обратите внимание на следующий код:

<table align="center" border="1">
<tr>

<th colspan=2>Личная информация</th>

<th colspan=3>Статистика</th>
</tr>
<tr>

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

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

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

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

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

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

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

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

В итоге мы получим это:

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

Я думаю здесь тоже без проблем...

Включение списка в таблицу

Таблицы можно комбинировать с другими элементами HTML. Так, они могут содержать списки любого из описанных на прошлом занятии типов. Строго следите за тем, чтобы всегда использовались закрывающие теги, иначе коды списков трудно отслеживать. Давайте попробуем включить маркированный список в нашу таблицу:

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

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

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

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

<td>

<li>команда "All-Star Team"

<li>Награда MVP

<li>Серебряная летучая мышь

</td>
</tr>
<tr>

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

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

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

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

В итоге мы получим это:

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

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

	Дорога к Храму		Цензуре-Нет!		Лучшее в Интернете		Спорт		VIP зона		Теософия и эзотерика

Урок # 7