Руководство по HTML5
Адам Фриман
Создание простой таблицы
Есть три элемента, которые должна содержать каждая таблица: 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
является то, что вам не придется беспокоиться о размерах. Браузер гарантирует, что столбцы будут достаточно широки для длинного контента, а строки будут достаточно высокими для самой высокой ячейки.