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

Заказать звонок

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

Подписка

Заказать звонок

+38 099 757 27 82

Таблицы: столбцы, шапки и подвалы

advertisement advertisement

Введение

Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как 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/

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
advertisement advertisement

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

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
48.00 $
59.99 $
Оформить подписку
Акция
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
54.00 $
89.99 $
Оформить подписку
Акция
Премиум
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
85.00 $
169.99 $
Оформить подписку
Акция
Notification success
Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.