Создание простой таблицы
Есть три элемента, которые должна содержать каждая таблица: table, tr и td. Есть и другие элементы, и я объясню их позже в этой главе, но начинать нужно с этих трех. Первый элемент, table, является сердцем поддержки табличного контента в HTML и обозначает таблицу в HTML документе. В таблице 11-2 представлен элемент table.
Таблица 11-2: Элемент table| Элемент | table |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы |
| Локальные атрибуты | border |
| Содержание | Элементы caption, colgroup, thead, tbody, tfoot, tr, th и td |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Устарели атрибуты summary, align, width, bgcolor, cellpadding, cellspacing, frame и rules. Вместо этого нужно использовать CSS. Значение атрибута border должно ровняться 1. Толщина рамки затем устанавливается при помощи CSS |
| Соглашение по стилям | table { display: table; border-collapse: separate;
border-spacing: 2px; border-color: gray; } |
Следующим основным элементом таблицы (table) является tr, который обозначает строку таблицы. В HTML таблицах строки играют большую роль, чем столбцы, и каждая строка должна быть обозначена отдельно. В таблице 11-3 представлен элемент tr.
Таблица 11-3: Элемент tr| Элемент | tr |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элементы table, thead, tfoot и tbody |
| Локальные атрибуты | Нет |
| Содержание | Один и более элементов td или th |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Устарели атрибуты align, char, charoff, valign и bgcolor. Вместо этого нужно использовать CSS |
| Соглашение по стилям | tr { display: table-row; vertical-align: inherit;
border-color: inherit;} |
Последним из трех основных элементов является td, который обозначает ячейку таблицы. В таблице 11-4 представлен элемент td.
Таблица 11-4: Элемент td| Элемент | td |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент tr |
| Локальные атрибуты | colspan, rowspan, headers |
| Содержание | Потоковый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Устарел атрибут scope. Вместо этого смотрите атрибут scope элемента th. Устарели атрибуты abbr, axis, align, width, char, charoff, valign, bgcolor, height и nowrap. Вместо этого нужно использовать CSS |
| Соглашение по стилям | td { display: table-cell; vertical-align: inherit; } |
После определения этих трех элементов их можно объединить и создать таблицу, как показано в листинге 11-1.
Листинг 11-1: Использование элементовtable,trиtdдля создания таблицы
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<table>
<tr>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
</table>
</body>
</html>В этом примере я определил элемент table, в котором есть две строки (обозначаются двумя элементами tr). Каждая строка состоит из трех столбцов, каждый из которых представлен элементом td. Элемент td может содержать любой потоковый контент, но в этом примере я вставил туда простой текст. На рисунке 11-1 вы можете видеть, как отображается таблица со стилями по умолчанию.
Рисунок 11-1: Отображение простой таблицы
Это очень простая таблица, но вы можете увидеть в ней основную структуру. Браузер отвечает за размеры строк и столбцов для поддержки таблицы. В качестве примера я добавил в таблицу больше контента, как показано в листинге 11-2.
Листинг 11-2: Больше контента в ячейках таблицы
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<table>
<tr>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
<tr>
<td>Pomegranate</td>
<td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html>
В каждом из вновь добавленных элементов td содержания больше, чем в двух предыдущих рядах. Вы можете увидеть, как браузер меняет другие ячейки, чтобы сделать их одинакового размера, что показано на рисунке 11-2.
Рисунок 11-2: Изменение размера ячеек для размещения большего контента
Одной из самых приятных особенностей элемента table является то, что вам не придется беспокоиться о размерах. Браузер гарантирует, что столбцы будут достаточно широки для длинного контента, а строки будут достаточно высокими для самой высокой ячейки.
