Таблицы HTML

Введение

Как использовать стандарты 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>

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

Давайте начнем с разбора разметки 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>

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

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

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