Среда, 22.11.2017, 22:54
Приветствую Вас Гость | RSS

Веб-планета

Уроки HTML'а. Урок # 7.

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

Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинциннати 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-кода. Теперь я покажу, в качестве примера правильной таблицы, код той самой таблицы:

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

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

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

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

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

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

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

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

<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 194

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

<table align="center" border="1">
<tr>
<th>Имя</th>
<th>Команда</th>
<th>Победы/поражения</th>
<th>Очки</th>
<th>Ауты</th>
</tr>
<tr>
<td>Пит Шурек</td>
<td rowspan=2>Цинциннати</td>
<td>16-2</td>
<td>2,73</td>
<td>194</td>
</tr>
<tr>
<td>Хосе Рио</td>
<td>28-2</td>
<td>1,92</td>
<td>199</td>
</tr>
</table>

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

Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинциннати 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>
<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>

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

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

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

<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>
<td>
<li>команда "All-Star Team"
<li>Награда MVP
<li>Серебряная летучая мышь
</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>

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

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

    Итак, сегодня мы начали знакомиться с таблицами. Мы изучили элементарные функции построения таблицы, изучили возможности объединения нескольких строк в одну ячейку и нескольких столбцов в одну ячейку. На тему таблиц материала осталось примерно еще на один урок.
    Меню сайта
    Шаг 1: Создаем сайт
    Шаг 2: Размещаем в интернет
    Шаг 3: Раскручиваем сайт
    Мини-чат
    РЕКЛАМА
      -------------------------
      Форма входа
      Наш опрос
      Оцените мой сайт
      Всего ответов: 44
      Друзья сайта
    • Официальный блог
    • Сообщество uCoz
    • FAQ по системе
    • Инструкции для uCoz
    • Статистика
      Copyright MyCorp © 2017
      Создать бесплатный сайт с uCoz
      Каталог ссылок, Top 100.