Таблицы

При создании текстов часто возникает необходимость сгруппировать информацию по нескольким критериям, например составить список покупок, где помимо названия покупки указывается количество и цена за штуку. Решить такую задачу помогают таблицы.

Разметка таблицы содержит в себе несколько основных элементов:

  • Тег table. Определяет границу таблицы.
  • Тег tr. Создание строки.
  • Тег td. Создания ячейки.
  • Тег th. Создание ячейки с заголовком.

Создадим таблицу из двух строк и трёх столбцов

Заголовок 1Заголовок 2Заголовок 3
Данные 1Данные 2Данные 3

Каждая таблица начинается с тега 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-х столбцов. Первая строка содержит в себе заголовки таблицы


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь с помощью учётной записи GitHub, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт на GitHub.