Таблицы: столбцы, шапки и подвалы - Блог 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/

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

Пакеты подписки с доступом ко всем курсам и сервисам

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 6 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 8 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
Премиум
  • Все видеокурсы на 12 месяцев
  • Тестирование по 16 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Подписка
Notification success