#10. Таблицы: table, tr, th, td, thead/tbody, colspan/rowspan

В уроке #9 мы перечисляли данные списком. Но если у каждого пункта есть несколько характеристик — товар и цена, день и занятие, — удобнее таблица.

Сразу важное правило: таблицы предназначены для табличных данных, а не для вёрстки страницы — расположение блоков на странице будем задавать через CSS в будущих уроках.

Минимальная таблица: table, tr, td

<table> — контейнер таблицы, <tr> (table row) — строка, <td> (table data) — ячейка. Ячейки записываются внутри строк, строки — внутри таблицы:

<table border="1">
    <tr>
        <td>Яблоки</td>
        <td>100 руб.</td>
    </tr>
    <tr>
        <td>Груши</td>
        <td>120 руб.</td>
    </tr>
</table>

Атрибут border="1" включает рамки. Он устарел (правильно задавать рамки через CSS — этому научимся в курсе по CSS), но пока пользуемся им, чтобы видеть границы ячеек: без него таблица выглядит как набор текста без сетки.

На странице это выглядит так:

Ячейки-заголовки: th

<th> (table heading) — ячейка-заголовок для строки или столбца. От <td> отличается только внешним видом и смыслом: браузер показывает её жирным и по центру.

Шапка и тело: thead и tbody

Строки с заголовками оборачивают в <thead>, а основной текст таблицы — в <tbody>. Полный пример:

<table border="1">
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
            <th>Количество</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Яблоки</td>
            <td>100 руб.</td>
            <td>3 кг</td>
        </tr>
        <tr>
            <td>Груши</td>
            <td>120 руб.</td>
            <td>2 кг</td>
        </tr>
    </tbody>
</table>

На странице это выглядит так:

Объединение ячеек: colspan и rowspan

Атрибут colspan растягивает ячейку на несколько столбцов:

<table border="1">
    <tr>
        <th>Товар</th>
        <th>Цена</th>
    </tr>
    <tr>
        <td>Яблоки</td>
        <td>100 руб.</td>
    </tr>
    <tr>
        <td colspan="2">Итого: 100 руб.</td>
    </tr>
</table>

На странице это выглядит так:

А rowspan — на несколько строк:

<table border="1">
    <tr>
        <td rowspan="2">Понедельник</td>
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
</table>

На странице это выглядит так:

Обратите внимание: в строке с rowspan во второй <tr> пишется на одну ячейку меньше — её место уже занято растянутой.

Практика

Сделайте таблицу «Расписание на неделю»: шапка в <thead> с колонками «День» и «Занятия», два-три дня, у каждого по 2–3 занятия; название дня растяните на свои строки через rowspan, а внизу добавьте строку «Итого занятий» с colspan.