Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7925 / 733 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 19:

Таблицы HTML

< Лекция 18 || Лекция 19: 12 || Лекция 20 >
Аннотация: Рассказывается, как правильно использовать таблицы HTML, какие элементы и атрибуты для этого используются. А также, даются некоторые сведения, как с помощью CSS можно улучшить вид таблицы

Введение

Как использовать стандарты Web для организации множества данных? Сама идея множества вложенных элементов, необходимых для превращения всех данных в симпатичные строки и ячейки должна привести мозг в состояние тревоги, но к счастью решение есть — на помощь приходят таблицы!

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

Раньше в доисторические времена Интернет, прежде чем CSS стал популярен в качестве средства разделения представления и структуры HTML, таблицы использовались в качестве средства компоновки Web-страниц — для создания столбцов, боксов, и общей организации контента. Это неправильный способ решения этих вопросов; использование таблиц для компоновки приводит к громоздким, беспорядочным страницам с множеством вложенных друг в друга таблиц — т.е. большие размеры файлов, трудности с обслуживанием, трудности с модификацией после создания. Можно до сих пор видеть в Web такие сайты, но сегодня необходимо использовать таблицы только для того для чего они предназначены — табличных данных — и использовать CSS для управления компоновкой.

Здесь мы рассмотрим, как правильно использовать таблицы HTML - лекция имеет следующую структуру:

  • Самая общая таблица
  • Добавление некоторых свойств
  • Дополнительная структуризация таблицы
  • Помощь CSS: улучшение вида таблицы
  • Заключение
  • Дополнительное чтение
  • Контрольные вопросы

Самая общая таблица

Я начну с семантического кода HTML, требуемого для представления таблицы — этот конкретный пример сравнивает последние вулканические извержения в тихоокеанском регионе Северной Америки.

Первая таблица выглядит следующим образом:

<table>
    <tr>
        <td>Volcano Name</td>
        <td>Location</td>
        <td>Last Major Eruption</td>
        <td>Type of Eruption</td>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

Это код представляет таблицу следующим образом:

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt .St. Helens Washington 1980 Explosive Eruption

Давайте начнем с разбора разметки HTML, использованной в приведенном выше коде:

  • <table></table>: Элемент table нужен, чтобы указать браузеру, что контент необходимо организовать в табличном виде.
  • <tr></tr>: Элемент tr определяет строку таблицы. Это позволяет браузеру организовать содержимое между тегами <tr> и </tr> в горизонтальном виде, или все в строке.
  • <td></td>: Элемент td определяет ячейку таблицы или каждое отдельное пространство для контента в строке. Используйте только столько ячеек таблицы td, сколько требуется для реальных данных. Не используйте пустые ячейки td для пробелов или заполнения - для требуемых пробелов или заполнения используется CSS, так как это не только хороший способ разделить представление и структуру, но также облегчает понимание таблицы для людей с недостатками зрения, которые используют считыватели экрана для чтения содержимого таблицы.

Отметим, что базовые элементы должны быть вложены друг в друга следующим образом:

<table>
    <tr>
        <td>контент </td>
        <td> контент </td>
        <td> контент </td>
    </tr>
</table>

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

Добавление некоторых свойств

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

<table>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <tr>
        <th>Volcano Name</th>
        <th>Location</th>
        <th>Last Major Eruption</th>
        <th>Type of Eruption</th>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt. St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

Этот код представляется следующим образом:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Здесь использованы следующие новые элементы:

  • <caption></caption>: Элемент caption позволяет создать заголовок для данных таблицы. Большинство браузеров будут выравнивать заголовок по центру и делает его такой же ширины, как и таблица, если только для другого выравнивания текста не используется CSS.
  • <th></th>: Элемент th определяет содержимое между тегами как заголовок таблицы для каждого столбца. Это помогает не только семантически описать содержимое, но также помогает представить его более аккуратно в различных браузерах и устройствах. Приведенный выше пример является наиболее упрощенным способом использования элемента th.
< Лекция 18 || Лекция 19: 12 || Лекция 20 >
Кристина Семенова
Кристина Семенова

Здравствуйте,подскажите,можно ли оплатить курс частями?

Никита Старцев
Никита Старцев
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989