HTML: Таблицы
При создании текстов часто возникает необходимость сгруппировать информацию по нескольким критериям, например, составить список покупок, где помимо названия покупки указывается количество и цена за штуку. Решить такую задачу помогают таблицы.
Разметка таблицы содержит в себе несколько основных элементов:
- Тег
table
. Определяет границу таблицы. - Тег
tr
. Создание строки. - Тег
td
. Создание ячейки. - Тег
th
. Создание ячейки с заголовком.
Создадим таблицу из двух строк и трёх столбцов
Первая ячейка | Вторая ячейка | Третья ячейка |
---|---|---|
Первая ячейка | Вторая ячейка | Третья ячейка |
Каждая таблица начинается с тега table
, без которого теги строк и ячеек не будут работать
<table>
<!-- Здесь будут данные таблицы -->
</table>
Таблицу удобно создать построчно, так как количество ячеек должно быть одинаковым, чтобы при отображении на сайте таблица не «сломалась». Создадим строку с тремя ячейками внутри
<table>
<tr> <!-- Строка -->
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
<td>Третья ячейка</td>
</tr>
</table>
Теперь скопируем строку и получим готовую таблицу из двух строк и трёх столбцов.
<table>
<tr> <!-- Строка -->
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
<td>Третья ячейка</td>
</tr>
<tr> <!-- Вторая строка -->
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
<td>Третья ячейка</td>
</tr>
</table>
Для того, чтобы первую строку сделать заголовками, нужно совершить два действия:
1. Обернуть строку в тег thead
. Это позволит в будущем задать оформление для строки с заголовками с помощью стилей.
2. Заменить теги td
на th
, которые специально созданы для обозначения заголовков таблиц. Помимо логического выделения таких столбцов, браузеры также выделяют текст внутри них жирным, что позволяет быстро находить эти заголовки в таблице.
<table>
<thead> <!-- Блок с заголовками -->
<tr> <!-- Строка -->
<th>Первая ячейка</th>
<th>Вторая ячейка</th>
<th>Третья ячейка</th>
</tr>
</thead>
<tr> <!-- Вторая строка -->
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
<td>Третья ячейка</td>
</tr>
</table>
Последним шагом станет добавление тега tbody
. Часто разработчики его упускают, потому что браузеры автоматически оборачивают им группу строк, которые не обёрнуты в другие теги. Обратите внимание — тег tbody
чаще всего только один в таблице. В больших таблицах можно использовать несколько tbody
, чтобы отделить разные секции в таблице, но в большинстве случаев в этом нет необходимости.
<table>
<thead> <!-- Блок с заголовками -->
<tr> <!-- Строка -->
<th>Первая ячейка</th>
<th>Вторая ячейка</th>
<th>Третья ячейка</th>
</tr>
</thead>
<tbody> <!-- Тело таблицы -->
<tr> <!-- Вторая строка -->
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
<td>Третья ячейка</td>
</tr>
</tbody>
</table>
Таблица готова. В ней присутствуют заголовки и тело таблицы. В большинстве случаев этого достаточно для того, чтобы использовать таблицы на HTML-странице.
Задание
Создайте таблицу из 3-х строк и 2-х ячеек. Первая строка содержит в себе заголовки таблицы