Таблицы: столбцы, верхние и нижние колонтитулы

Итак, вы думаете, что знаете, как составить таблицу. Конечно, вы знаете теги table, tr, td и th, и у вас в кармане даже есть атрибуты rowspan и colspan.

Вы можете сделать действительно симпатичный маленький журнальный столик из фанеры, но разве вы не хотите знать, как сделать один из тех обеденных столов из полированного массива дерева со стеклянной столешницей, который выдержит вес огромного слона?

Столбцы наносят ответный удар

Строки таблицы, как правило, делают столбцы таблицы довольно глупыми. Они выполняют всю работу, поскольку таблица строится строка за строкой, в результате чего столбцы кажутся совершенно отвергнутыми.

К счастью для тех, кто любит столбцы, теги colgroup и col пришли им на помощь.

Эти теги позволяют вам определять столбцы таблицы и оформлять их по желанию, что особенно полезно, если вы хотите, чтобы определённые столбцы были выровнены или окрашены по-разному, поскольку без этого вам пришлось бы выделять отдельные ячейки.

<table>
    <colgroup>
        <col>
        <col class="alternative">
        <col>
    </colgroup>
    <tr>
        <td>Это</td>
        <td>То</td>
        <td>Другое</td>
    </tr>
    <tr>
        <td>Бисквит</td>
        <td>Мороженное</td>
        <td>Фрукты</td>
    </tr>
</table>

В этом примере стили CSS-класса “alternative” будут применены ко второму столбцу или второй ячейке в каждой строке.

Вы также можете использовать атрибут span аналогично rowspan и colspan. Использование его с тегом colgroup определит количество строк, к которым будет принадлежать группа столбцов, например,

<colgroup span="2"></colgroup>

сгруппирует первые два столбца.

Использование span в теге col обычно приносит больше пользы. Его можно, например, применить к приведённому выше примеру следующим образом:

<table>
    <colgroup>
        <col>
        <col span="2" class="alternative">
    </colgroup>
<!-- and so on -->

Это применило бы “альтернативу” к двум последним столбцам.

Когда span используется в colgroup, вам не следует использовать теги col.

Интерлюдия к заголовку

Краткий и простой способ обеспечения доступности ─ применить к таблице заголовок. Элемент caption определяет заголовок и должен использоваться сразу после открывающего тега table.

<table>
    <caption>Десерты со льдом</caption>
<!-- etc. -->

Заголовок будет отображаться над таблицей по умолчанию, хотя использование CSS caption-side: bottom будет делать то, что вы ожидаете.

Более мощный figcaption был бы предпочтительнее, чем caption если вы выделяете таблицу в качестве единственного содержимого элемента figure. Дополнительные сведения смотрите на странице о Разделении.

Верхние и нижние колонтитулы

Теги thead, tfoot и tbody позволяют разделить таблицу на верхний, нижний колонтитул (футер) и тело, что может быть удобно при работе с таблицами большего размера.

В то время как thead должно быть первым, tfoot фактически может быть перед tbody. И у вас может быть больше одного tbody, если вам так больше нравится, хотя браузеры будут отображать элемент tfoot в нижней части таблицы.

<table>
    <thead>
        <tr>
            <td>Заголовок 1</td>
            <td> Заголовок 2</td>
            <td> Заголовок 3</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Футер 1</td>
            <td> Футер 2</td>
            <td> Футер 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Ячейка 1</td>
            <td> Ячейка 2</td>
            <td> Ячейка 3</td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>

Страницы в тему:

Добавить комментарий