Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8055 / 758 | Оценка: 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 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам