19. Таблицы html

Рассказывается, как правильно использовать таблицы 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>

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