ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как 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 ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$