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

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

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

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

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

Таблица умножения
<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>
...

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

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание
  • добавьте заголовок к вашей таблице, располагающийся справа вверху
Читайте также
Комментарии


tasa__93@mail.ru
tasa__93@mail.ru

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

ol
ol

Здравствуйте!

В варианте с чистым HTML понятно, где и как должен быть прописан заголовок: "Таблица умножения" - в теге "<caption>". А в варианте с CSS где и как прописывать заголовок?

ivashkevich
ivashkevich

Приветствую, в этом же теге. И в дальнейшем для этого тега просто задаются свойства:

<style>
caption {
    тут стили;
}
</style>
ol
ol

Спасибо.

Raindery
Raindery

У меня возникла проблема. Т.к. я работаю с отдельным файлом CSS, а не в самом HTML-файле пишу CSS код, по какой-то причине после перезапуска компьютера, CSS файл не реагирует на изменения которые я вношу в него. А остается таким, каким я его сделал до перезапуска.

ivashkevich
ivashkevich

Здравствуйте, напишите мне в ВК. Посмотрим, что у вас там такого ужасного)

Serg
Serg

Здравствуйте. Удалил первую таблицу, создал вторую. Стили не менял, теперь они не корректно влияют на вторую таблицу.Почему так? Спасибо за курсы!)

ivashkevich
ivashkevich

Привет. А что значит некорректно? Давайте детали - код в студию! :)