Таблицы HTML
Таблицы HTML позволяют упорядочивать данные в ряды и столбцы.
Пример
Таблица компаний, контактов и стран.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Введение в Таблицы</title>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Австрия</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>Великобритания</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Канада</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Италия</td>
</tr>
</table>
</body>
</html>
Определение Таблицы HTML
Таблица состоит из ячеек таблицы, расположенных в рядах и столбцах, всё это внутри элемента <table>.
Пример
Простая таблица со строкой заголовка и двумя рядами данных.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Простая Таблица</title>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Ячейки Таблицы
Каждая ячейка таблицы определяется тегом <td> и тегом </td>. «td» означает «table data» (данные таблицы), и всё, что находится между тегами, является содержимым ячейки.
Примечание: Ячейка может содержать любой HTML: текст, изображения, списки, ссылки и даже другие таблицы.
Пример
Ряд из трёх ячеек данных.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ячейки Таблицы</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
</body>
</html>
Ряды Таблицы
Каждый ряд таблицы начинается с тега <tr> и заканчивается тегом </tr>. «tr» означает «table row» (ряд таблицы). Вы можете иметь сколько угодно рядов; просто держите одинаковое количество ячеек в каждом ряду.
Примечание: Иногда один ряд может иметь меньше или больше ячеек, чем другой; вы узнаете об этом в одной из следующих глав.
Пример
Таблица с двумя рядами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Строки Таблицы</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Заголовки Таблицы
Когда вы хотите, чтобы ячейка была заголовком, используйте тег <th> вместо <td>. «th» означает «table header» (заголовок таблицы). По умолчанию текст заголовка жирный и по центру, но это можно изменить с помощью CSS.
Пример
Таблица, первый ряд которой состоит из ячеек заголовков.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовки Таблицы</title>
</head>
<body>
<table>
<tr>
<th>Человек 1</th>
<th>Человек 2</th>
<th>Человек 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Теги Таблицы HTML
Связанные с таблицей теги: <table> (таблица), <th> (ячейка заголовка), <tr> (ряд), <td> (ячейка), <caption> (подпись таблицы), <colgroup> (группа столбцов для форматирования), <col> (свойства столбца внутри colgroup), <thead> (группирует содержимое заголовка), <tbody> (группирует содержимое тела) и <tfoot> (группирует содержимое подвала).