10.03.2017   1753

Название таблицы

Название таблицы

Привет всем! Ну что же, Вас есть с чем поздравить! Отныне вы умеете создавать самые простые таблицы, а также осуществлять их оформление и они не выглядят такими нелепыми, как те что были в первом уроке этого уровня, не так ли? Уверен, Вы ожидаете от таблиц чего-то ещё более интересного. Всё впереди, уж поверьте мне!

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

Давайте рассмотрим следующий код:

Таблица умножения
<table>
    <tr>
        <td>*</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>
</table>

И посмотрим на результат в браузере:

Подпись, которая называется Таблица умножения является просто текстом. Конечно, с визуальной точки зрения, видно, что данное словосочетание представляет собой название таблицы. Но если решать данную задачу с учетом семантики, то более корректным будет использование тега <caption>.

Располагается этот тег внутри <table>. И кроме этого, если в <table> есть еще теги, то <caption> должен идти первым. Вот как это выглядит на примере:

<table>
    <caption>Таблица умножения</caption>
    ...
</table>

Таблица с названием

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

Чтобы переместить заголовок таблицы в вертикальном направлении, следует использовать такое CSS-свойство, как caption-side. Добавив к нему значение top, можно поставить заголовок перед таблицей, а значение bottom позволит разместить его после таблицы.

Например:

...
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: bottom;
        }
...

Результат:
Таблица с подписью внизу

Чтобы двигать заголовок в горизонтальном направлении, следует использовать CSS-свойство text-align. Значения left, right и center позволяют разместить заголовок слева, справа и по центру, соответственно.

Например:

...
    <style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: bottom;
        }

        table caption {
            text-align: left;
        }

        td {
            border: solid 1px blue;
            padding: 10px;
        }
    </style>
...

Результат:
Таблица с подписью внизу слева

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Следующий урок Предыдущий урок

Комментарии

 tasa__93@mail.ru 2017-05-27 13:10:15
0

Ох, как я далека от всего этого. Почитала, хоть немного начала понимать и вникать. Надеюсь, в дальнейшем у меня все получится и я наконец-то разберусь в HTML)

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности