Caption (заголовок) заголовок для таблицы (нет в html 2 0)

Содержание

Caption (заголовок) заголовок для таблицы (нет в html 2 0)

Выше или под самой таблицей обычным шрифтом.

Обычно заголовок центрирован по горизонтали. (HTML 3.2 не предоставляет средство для изменения поведения броузера.)

Основной синтаксис

Возможные атрибуты

имя атрибута	возможные значения	смысл	примечания
ALIGN	TOP, BOTTOM	размещение заголовка относительно таблицы (вверху или внизу таблицы)	по умолчанию обычно TOP

Допустимый контекст

Элемент TABLE. Если элемент TR присутствует, элемент CAPTION должен следовать первым, до элемента TR.

Содержимое

Примеры

Примечания

Считается нормальным включать в документ заголовок к каждой таблице. Текст заголовка должен быть относительно коротким, но информативным. Избегайте вставки объяснений в заголовок. Дайте объяснения в пределах обычного текстового абзаца. Заголовок должен сказать, о чем таблица. А в тексте должно говориться почему таблица представлена, т.е. каким образом таблица связана с текстом документа.

Смотрите обсуждение таблиц, которое также содержит дополнительные примеры.

Некоторые броузеры (например, Netscape) не отображают заголовок отлично от обычного текста. Поэтому в пределах элемента CAPTION желательно использовать элементы логической разметки, например, EM или STRONG.

Как пометить заголовок для списков HTML

AFAIK, для таблиц нет выделенного элемента — типа , для цифр и т.д.—, чтобы пометить заголовок списка. Какую разметку следует использовать?

В HTML 3.0 появился элемент , но теперь он устарел.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis в faucibus orci luctus et Ультразвук posuere cubilia Curae; Morbi vitae erat в nisl suscipit rutrum.

Фрукты, которые я люблю:

In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facili. Sed id sapien eget mi cursus placerat vel sed Justo. Integer vel pellentesque magna. Donec quis nisi lacus, accsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. меценат adipiscing purus magna.

Как зафиксировать заголовок таблицы при прокрутке?

Есть таблица в контейнере с жёстко заданной высотой. При большом количестве строк в таблице у окружающего блока появляется полоса прокрутки. Однако имеется проблема — заголовок таблицы уезжает наверх, и его не видно. Как зафиксировать его, чтобы он всегда был виден наверху блока?

Я пытался назначить ему вот такие CSS свойства, но видимого результата нет.

Какие есть способы решения проблемы? Желательно обойтись без разбиения таблицы не две, т.к. в таком случае могут разойтись столбцы.

Для удобства вот пример моей вёрстки.

2 ответа 2

К сожалению, сейчас position: sticky практически нигде не поддерживается, поэтому данный ответ не очень полезный

Судя по этому ответу на enSO из-за бага в Chrome, свойство position: sticky нужно присваивать не заголовку таблицы ( thead ), а ячейкам этого заголовка ( th ). Ну и ещё стоит добавить к ним белый фон. Примерно так:

Caption (заголовок) заголовок для таблицы (нет в html 2 0)

Тег caption — это заголовок таблицы

Тег используют для написания заголовка к таблице и должен размещаться в теге

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

align — определяет выравнивание заголовка по горизонтали.

valign — сообщает браузеру, где должен находиться заголовок до или после таблицы.

Для этого тега можно использовать глобальные атрибуты и события.

Добавление заголовка таблицы

Элемент caption позволяет определить заголовок и связать его с элементом table . В таблице 11-9 представлен элемент caption .

Таблица 11-9: Элемент caption

Элемент	caption
Тип элемента	N/A
Разрешенные родительские элементы	Элемент table
Локальные атрибуты	Нет
Содержание	Потоковый контент (но не элементы table )
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Устарел атрибут align
Соглашение по стилям	caption

В листинге 11-11 показано, как используется элемент caption .

Листинг 11-11: Использование элемента caption

В таблице может быть только один элемент caption , и он не обязательно должен быть первым элементом, содержащимся в таблице. Этот элемент всегда будет отображаться над таблицей, независимо от того, где он был определен. Вы можете увидеть заголовок (и стиль, который я применил к нему) на рисунке 11-9.

Рисунок 11-9: Добавление заголовка таблицы

Фиксированный заголовок таблицы HTML

Таблицы довольно часто используются для отображения некоторой статистической информации и не только. Наличие большого количества строк в таблице наводит на здравую идею — фиксацию заголовка таблицы для удобного восприятия данных из неё. Для реализации этой затеи одной стандартной таблицей, к сожалению, не обойтись, однако в этом нет ничего страшного, и в нашем примере мы рассмотрим решение этой проблемы посредством использования двух разных таблиц.

Наверное, вы уже догадались, что первая таблица будет использоваться для отображения именно фиксированной части заголовка. Вторая – будет отображать само содержимое таблиц. Для разделения таблиц так же будут использованы блоки div, и для задания одинаковых размеров для ячеек таблиц будут использованы общие атрибуты в CSS. Для второй таблицы будет доступен скроллинг, таким образом, она будет скролиться по отношению к первой таблице.

HTML разметка таблицы

Для наглядного примера мы сделали таблицу довольно содержательной, теперь код CSS стилей.

CSS стили таблицы

Так же для правильного отображения таблицы при ресайзинге мы воспользуемся простым Javascript-кодом:

Наглядный пример того что получилось вы можете просмотреть на демо-странице ссылка которой будет ниже. Если это показалось вам сложным решением, то не стоит раньше времени расстраиваться, попробуйте реализовать это дело самим, и вы поймете, что нет ничего сложного. Касательно темы таблиц так же рекомендую к прочтению статью о сортируемых таблицах Data Tables.
Демо | Скачать в архиве

HTML-таблицы

Выше приведен пример таблицы в HTML. К ней было применено несколько стилей (с помощью элемента в разделе ).

Как работают HTML-таблицы

В HTML таблицы создаются с помощью тега

вместе с тегами :

Каждый элемент

представляет собой строку таблицы. А элемент , , , и .

Ниже приведен пример, в котором используются эти теги HTML таблицы:

Многие из дополнительных тегов позволяют группировать другие элементы внутри них. Например, элемент

используется для группировки заголовков столбцов таблицы для группировки нижних частей столбцов и т.д.

Элемент позволяет группировать столбцы. Это удобно для применения стилей ко всем ячейкам столбца. В приведенном выше примере мы используем span=»2″ для группировки первых двух столбцов. Мы также применяем класс к этой группе столбцов. Поэтому, если мы применим для этого класса цвет фона, то он будет применяться к первым двум столбцам.

Атрибуты

Тег

и
— ячейку данных. Существуют и другие элементы, которые можно использовать с таблицами, такие как	,

— ячейку данных.

Существуют и другие элементы, которые можно использовать с таблицами, такие как

поддерживает атрибуты border и sortable (как и глобальные атрибуты ), а также атрибуты обработчика событий.

Использование атрибута border позволяет задать HTML отступы в таблице. Например:

Тем не менее, в последнее время разработчики предпочитают при HTML оформлении таблицы вместо атрибута border использовать CSS . С помощью CSS вы можете сделать гораздо больше. Кроме этого в HTML5 атрибут border предназначен только для указания браузеру того, что таблица не используется для структуры.

Атрибут sortable предназначен для того, чтобы включить возможность сортировки интерфейса таблицы.

Еще два атрибута, которые могут оказаться полезными при работе с таблицами — это атрибуты colspan и rowspan . Их можно использовать с тегами

. Они позволяют указать, сколько столбцов или строк должна охватывать ячейка. Ниже приведены примеры использования этих атрибутов.

Colspan:

В этом примере первая ячейка заголовка охватывает два столбца:

RowSpan:

В этом примере мы применяем rowspan=»» для первой ячейки заголовка. В результате ячейка заголовка охватывает все три строки:

Старайтесь не применять HTML-таблицы для разметки

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

HTML-таблицы не предназначены для использования в целях форматирования. Заманчиво использовать их для создания макетов, но делать это не рекомендуется.

Данная публикация представляет собой перевод статьи « HTML Tables » , подготовленной дружной командой проекта Интернет-технологии.ру

Как закрепить заголовок у таблицы?

Доброго времени суток.
Возникла следующая проблема, необходимо закрепить заголовок у html таблицы, что бы скроллилось только нижняя часть.
Перепробовал уже с десяток разных решений, пробовал изобрести что то свое. Не получается.
Сложность в том, что помимо вертикального скролла, присутствует и горизонтальный и есть еще и colspan.
Ниже скриншот

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

Вопрос задан более трёх лет назад
26351 просмотр

Вот что набросал на скорую руку: http://jsfiddle.net/4jfQ6/
с горизонтальным и вертикальным скроллом, на первый взгляд, работает как и хотелось бы

Идеология следующая:
1. создаем шапку, которая будет фиксированной, для этого используем ширину и текст шапки таблицы
2. при прокручивании окна по горизонтали двигаем зафиксированную шапку

Тег

HTML ячейка заголовок в таблице

Тег

определяет ячейку-заголовок в HTML таблице. Используется в HTML таблицах определенных тегом .

В HTML таблицах существует 2 типа ячеек: ячейки-заголовки и обычные ячейки. Тег

указывает на ячейки-заголовки таблицы HTML. Для определения обычной ячейки используйте тег .

HTML тег ячейки

ставится внутри тега — строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

Отображение в браузере

Ячейка-заголовок 1	Ячейка-заголовок 2
Обычная ячейка 1	Обычная ячейка 2
Обычная ячейка 3	Обычная ячейка 4

Пример использования

в HTML коде

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Атрибуты

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(216,122,030), rgb(0, 55, 191).
HTML hex: #ebedef, #999.
HTML colorname: red, black;

Заголовок таблицы или ее подпись. HTML-тег caption.

Адаптация Сайта под ВСЕ разрешения экранов

Доброго времени суток. Меня зовут Михаил.

Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.

Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.

В прошлом видео уроке мы приступили к знакомству с HTML-таблицами. Узнали, как сделать таблицу в HTML? Познакомились с тремя HTML-тегами, которые нужны для создания таблицы. И наконец, изучили огромное количество атрибутов для таблиц.

Сегодня мы продолжаем знакомство с таблицами. В этом видео уроке, рекордно коротком, но информативном мы познакомимся с еще одним HTML-тегом — .

Тег позволит нам добавить некую подпись для таблицы, которую сможет увидеть посетитель. Также стоит отметить, что эту подпись еще можно назвать заголовком таблицы, хоть это и не совсем правильно. Заголовок таблицы нужен, чтобы для каждой таблицы на странице, если она не одна, мы могли указать название, которое может очень помочь посетителям в ориентировании по странице.

Представьте, что у Вас на странице несколько таблиц, довольно похожих по структуре. Тогда вопрос ориентирования среди этих таблиц может встать наиболее остро. Именно для выхода из таких ситуаций и существует тег .

Добавить заголовок к таблице довольно просто. Для этого достаточно добавить парный тег в HTML-документ. И между тегами написать собственно название таблицы. Очень важно помнить, что HTML-тег должен прописываться сразу после открывающего тега

Атрибут	Значения	Описание
colspan	число	Количество ячеек по горизонтали, которые должны быть объединены.
headers	id_заголовка	Указывает заголовок, к которому относится ячейка.
rowspan	число	Количество ячеек по вертикали, которые должны быть объединены.
scope	col colgroup row rowgroup	Устанавливает группу ячеек, к которым относится ячейка-заголовок : col — колонка; colgroup — группа колонок; row — ряд; rowgroup — группа рядов.
Устаревшие атрибуты
abbr	текст	Короткая версия содержимого ячейки.
align	left right center justify	Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis	имя_категории	Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor	rgb HTML hex HTML colorname

, о котором мы говорили в прошлый раз.

Пример того, как будет выглядеть сам тег в HTML-коде:

Если же говорить об общей структуре и внедрении в HTML-код таблицы, то пример будет выглядеть так (использована простая таблица из предыдущей статьи):

Заголовок таблицы

Ячейка 1-1	Ячейка 1-2	Ячейка 1-3
Ячейка 2-1	Ячейка 2-2	Ячейка 2-3
Ячейка 3-1	Ячейка 3-2	Ячейка 3-3

Что касается атрибутов для данного тега. То к нему могут применяться только универсальные атрибуты.

Видео урок: Заголовок таблицы или ее подпись. HTML-тег caption.

HTML-справочник и другие материалы можно и нужно скачать здесь!