Главная страница   /   11.1. Создание простой таблицы (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

11.1. Создание простой таблицы

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