Тег CAPTION, атрибут align

HTML Tag

By default, a table caption is center-aligned above a table. But it is possible to use the text-align and caption-side properties to align and place the caption.

Syntax

The

tag comes in pairs. The content is written between the opening ( ) and closing (

) tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> table width="400" border="1"> caption>Evaluation paper caption> thead> tr> th>Student th> th>1st exam th> th>2nd exam th> tr> thead> tbody> tr> td>John Johnson td> td>75 td> td>65 td> tr> tr> td>Mary Nicolson td> td>55 td> td>80 td> tr> tr> td>Max Thomson td> td>60 td> td>47 td> tr> tbody> table> body> html>

Result

Evaluation paper

Student	1st exam	2nd exam
John Johnson	75	65
Mary Nicolson	55	80
Max Thomson	60	47

Example of the HTML tag with the CSS caption-side property:

html> html> head> title>Title of the document title> style> caption < background: #1c87c9; color: #fff; caption-side: bottom; > table, th, td < border: 1px solid #1c87c9; padding: 3px; > td < background-color: #cccccc; color: #666666; > style> head> body> h2>Caption-side property example h2> p>Here the caption-side is set to "bottom": p> table> caption>Some title here caption> tr> td>Some text td> td>Some text td> tr> table> body> html>

Attributes

Attribute	Value	Description
align	Aligns the header horizontally. Not used in HTML5.
	right	the header is placed on top and aligned to the right.
	left	the header is placed on top and aligned to the left.
	top	the header is placed on top and aligned to the center.
	bottom	the header is placed below and aligned to the center.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

HTML Tag

The tag must be inserted immediately after the tag.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Position table captions (with CSS):

My savings

Month	Savings
January	$100

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Атрибут align

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

Синтаксис

Значения

left В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы. Safari и Chrome игнорируют это значение. right В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Firefox заголовок располагается от таблицы справа. Safari и Chrome игнорируют это значение. top Заголовок размещается перед таблицей по ее центру. bottom Заголовок размещается внизу таблицы по ее центру.

Значение по умолчанию

Аналог CSS

Валидация

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

       
Пример таблицы
 
#
 
Чебурашка
 
Крокодил Гена
 
Шапокляк
 
 
1
FXD
 
URN
LWK
 
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Размещение заголовка под таблицей

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Атрибут align

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

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

Синтаксис

Значения

left В Firefox заголовок располагается слева от таблицы. Остальные браузеры игнорируют это значение. right В Firefox заголовок располагается справа от таблицы. Остальные браузеры игнорируют это значение. top Заголовок размещается перед таблицей по её центру. bottom Заголовок размещается внизу таблицы по её центру.

Значение по умолчанию

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Размещение заголовка под таблицей

Примечание

Для выравнивания заголовка по горизонтали используйте стилевое свойство text-align. Чтобы задать положение заголовка до или после таблицы, воспользуйтесь свойством caption-side.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Источник

: The Table Caption element

The HTML element specifies the caption (or title) of a table.

Try it

Attributes

This element includes the global attributes.

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:

The caption is displayed to the left of the table.

The caption is displayed above the table.

The caption is displayed to the right of the table.

The caption is displayed below the table.

Warning: Do not use this attribute, as it has been deprecated. The element should be styled using the CSS properties caption-side and text-align .

Usage notes

If used, the element must be the first child of its parent element.

A background-color on the table will not include the caption. Add a background-color to the element as well if you want the same color to be behind both.

Example

This simple example presents a table that includes a caption.

table> caption> Example Caption caption> tr> th>Loginth> th>Emailth> tr> tr> td>user1td> td>user1@sample.comtd> tr> tr> td>user2td> td>user2@sample.comtd> tr> table> 

caption  caption-side: top; > table  border-collapse: collapse; border-spacing: 0px; > table, th, td  border: 1px solid black; > 

Technical summary

Content categories	None.
Permitted content	Flow content.
Tag omission	The end tag can be omitted if the element is not immediately followed by ASCII whitespace or a comment.
Permitted parents	A element, as its first descendant.
Implicit ARIA role	caption
Permitted ARIA roles	No role permitted
DOM interface	HTMLTableCaptionElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник