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

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

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

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

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

Таблица умножения
<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 16:10:15
+1

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

Ответить
 ol 2017-07-24 06:30:53
+1

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

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

Ответить
  •  ivashkevich 2017-07-24 06:55:10
    0

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

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

    Ответить
 ol 2017-07-24 06:57:26
0

Спасибо.

Ответить
 Raindery 2017-09-26 00:47:46
0

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

Ответить
  •  ivashkevich 2017-09-26 04:03:58
    0

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

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


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