Заголовок таблицы
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег , который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют атрибуты тега , из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега существует атрибут align , который может принимать следующие значения.
- left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
- right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
- center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
- top — результат аналогичен действию атрибута center , но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
- bottom — заголовок размещается внизу таблицы по ее центру.
Пример 12.7. Создание заголовка таблицы
Заголовок таблицы Изменение добычи ресурсов по годам 2003 2004 2005 Нефть 43 51 79 Золото 29 34 48 Дерево 38 57 36
Ниже показан результат данного примера (рис. 12.9).
Рис. 12.9. Вид заголовка таблицы в браузере Safari
HTML по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Как выровнять заголовок таблицы по левому краю?
Заголовок таблицы, созданный с помощью элемента , отображается выше самой таблицы и располагается горизонтально по её центру. Для выравнивания заголовка применяется свойство text-align со значением left или rigth , которые, соответственно, выравнивают текст по левому или правому краю. В примере 1 показано, как выровнять заголовок по левому краю.
Пример 1. Использование text-align
| Леонардо | Катаны |
| Рафаэль | Кинжалы-сай |
| Донателло | Шест-бо |
| Микеланджело | Нунчаки |
| Имя | Оружие |
|---|
Результат данного примера показан на рис. 1. Свойство text-align добавляется к селектору caption. Для разнообразия текст сделан курсивным с помощью свойства font-style.
Рис. 1. Расположение заголовка таблицы
Тег HTML ячейка заголовок в таблице
Тег определяет ячейку-заголовок в HTML таблице. Используется в HTML таблицах определенных тегом .
В HTML таблицах существует 2 типа ячеек: ячейки-заголовки и обычные ячейки. Тег указывает на ячейки-заголовки таблицы HTML. Для определения обычной ячейки используйте тег .
HTML тег ячейки ставится внутри тега — строки таблицы.
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
контент ячейки Отображение в браузере
| Ячейка-заголовок 1 | Ячейка-заголовок 2 |
|---|---|
| Обычная ячейка 1 | Обычная ячейка 2 |
| Обычная ячейка 3 | Обычная ячейка 4 |
Пример использования в HTML коде
Ячейки-заголовки в HTML таблице
Ячейка-заголовок 1
Ячейка-заголовок 2
Обычная ячейка 1
Обычная ячейка 2
Обычная ячейка 3
Обычная ячейка 4 Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
Фоновый цвет. В HTML5 используйте CSS.
Примеры:
RGB: rgb(216,122,030), rgb(0, 55, 191).
HTML hex: #ebedef, #999.
HTML colorname: red, black;
Заголовок таблицы
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег caption> , который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют параметры тега caption> , из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега caption> существует параметр align , который может принимать следующие значения.
- left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
- right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
- center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
- top — результат аналогичен действию параметра center , но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
- bottom — заголовок размещается внизу таблицы по ее центру.
Листинг 12.7. Создание заголовка таблицы
Заголовок таблицы
| 2003 | 2004 | 2005 | |
|---|---|---|---|
| Нефть | 43 | 51 | 79 |
| Золото | 29 | 34 | 48 |
| Дерево | 38 | 57 | 36 |
Ниже показан результат данного примера (рис. 12.9).
Рис. 12.9. Вид заголовка таблицы в браузере Opera