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 — это заголовок таблицы
Тег используют для написания заголовка к таблице и должен размещаться в теге
Элемент | 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 таблицы создаются с помощью тега
и | ||||||||||
— ячейку данных.
Существуют и другие элементы, которые можно использовать с таблицами, такие как | , , , |
---|
и | . Они позволяют указать, сколько столбцов или строк должна охватывать ячейка. Ниже приведены примеры использования этих атрибутов.
Colspan:В этом примере первая ячейка заголовка охватывает два столбца: RowSpan:В этом примере мы применяем rowspan=»» для первой ячейки заголовка. В результате ячейка заголовка охватывает все три строки: Старайтесь не применять HTML-таблицы для разметкиПеред тем, как сделать таблицу в HTML , нужно помнить, что они предназначены только для представления табличных данных, имеющих многоуровневую структуру. Эти данные нуждаются в сортировке по строкам и столбцам, чтобы быть представленными правильно. HTML-таблицы не предназначены для использования в целях форматирования. Заманчиво использовать их для создания макетов, но делать это не рекомендуется. Данная публикация представляет собой перевод статьи « HTML Tables » , подготовленной дружной командой проекта Интернет-технологии.ру Как закрепить заголовок у таблицы?Доброго времени суток. Пробовал, и разделить на две таблицы, тогда у верхней таблицы с заголовком нужно выравнивать длину ячеек, но найти нужного решения так и не смог.
Вот что набросал на скорую руку: http://jsfiddle.net/4jfQ6/ Идеология следующая: Тег
Тег В HTML таблицах существует 2 типа ячеек: ячейки-заголовки и обычные ячейки. Тег HTML тег ячейки Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах. СинтаксисОтображение в браузере
Пример использования
Поддержка браузерами
Атрибуты
Что касается атрибутов для данного тега. То к нему могут применяться только универсальные атрибуты. Видео урок: Заголовок таблицы или ее подпись. HTML-тег caption.HTML-справочник и другие материалы можно и нужно скачать здесь! |
---|