Таблицы: столбцы, шапки и подвалы - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно
ITVDN logo
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно

Введение

Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как tr, td, th или table, использовали атрибуты colspan, а также rowspan. Вы можете сделать такой себе милый маленький столик из фанеры, но можете и не знать, как сделать обеденный стол из твердых пород дерева, застекленная столешница которого запросто выдержит вес немаленького слона.


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

Как правило, таблицы строятся исключительно строками, делая столбцы ненужными элементами. К счастью для тех, кто хочет работать именно со столбцами, есть замечательные теги - colgroup и col.

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

<table>

    <colgroup>

        <col>

        <col class="alternative">

        <col>

    colgroup>

    <tr>

        <td>

            This

        td>

        <td>

            That

        td>

        <td>

            The other

        td>

    tr>

    <tr>

        <td>

            Ladybird

        td>

        <td>

            Locust

        td>

        <td>

            Lunch

        td>

    tr>

table>

В примере класс "alternative"> будет применяться ко второму столбцу  или же второй ячейке каждой строки.

Иногда удобно использовать атрибут span. Теги rowspan и colspan с colgroup определяют количество строк, в которых нужно объединить столбцы. Запись: <colgroup span="2"> colgroup- группирует первые два столбца. Пример:

<table>

    <colgroup>

        <col>

        <col span="2" class="alternative">

    colgroup>

   

В этом примере класс "alternative" использовался в двух последних столбцах. Использование тега col не обязательное, если colgroup содержит в себе span.

Название эпизода

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

<table>

    <caption>

        Locust mating habitscaption>

   

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

Если Вы хотите сделать таблицу элементом figure, то лучше использовать figcaption вместо тега caption.

Шапки и подвалы

Для работы с большими таблицами удобнее всего использовать thead, tfoot и tbody для разбивки на структурные элементы header, footer и body.

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

<table>

    <thead>

        <tr>

            <td>

                Header 1

            td>

            <td>

                Header 2

            td>

            <td>

                Header 3

            td>

        tr>

    thead>

    <tfoot>

        <tr>

            <td>

                Footer 1

            td>

            <td>

                Footer 2

            td>

            <td>

                Footer 3

            td>

        tr>

    tfoot>

    <tbody>

        <tr>

            <td>

                Cell 1

            td>

            <td>

                Cell 2

            td>

            <td>

                Cell 3

            td>

        tr>

       

    tbody>

table>

Источник: http://www.htmldog.com/guides/html/advanced/tables/

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

Стань профессионалом, используя все возможности обучения на ITVDN

Стартовый
подписка

Все видео курсы на 3 месяца за 49.99 $

0
Базовый
подписка

Все видео курсы на 6 месяцев за 89.99 $

1
Премиум
подписка

Все видео курсы на 12 месяцев за 169.99 $

2
Notification success