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