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