{"id":248452,"date":"2016-12-29T06:14:29","date_gmt":"2016-12-29T13:14:29","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=248452"},"modified":"2022-02-01T08:26:07","modified_gmt":"2022-02-01T16:26:07","slug":"caption-side","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caption-side\/","title":{"rendered":"caption-side"},"content":{"rendered":"\n<p>The <code>caption-side<\/code> property in CSS allows you to define <em>where<\/em> to position HTML&#8217;s <code>&lt;caption&gt;<\/code> element, used on HTML table headers. This property can also apply to any element whose <code>display<\/code> property is set to <code>caption-side<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">table {\n  caption-side: top;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">caption-side: top | bottom | block-start | block-end | inline-start | inline-end<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>top<\/code><\/li><li><strong>Applies to:<\/strong> table-caption elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Directional values *\/\ncaption-side: top;\ncaption-side: bottom;\n\n\/* Logical values *\/\ncaption-side: block-start;\ncaption-side: block-end;\ncaption-side: inline-start;\ncaption-side: inline-end;\n\n\/* Global values *\/\ncaption-side: inherit;\ncaption-side: initial;\ncaption-side: revert;\ncaption-side: unset;<\/code><\/pre>\n\n\n\n<ul><li><strong><code>top<\/code>:<\/strong> the default. Positions the caption at the top of the table.<\/li><li><strong><code>bottom<\/code>:<\/strong> Positions the caption at the bottom of the table.<\/li><li><strong><code>block-start<\/code>:<\/strong> Positions the caption at the table&#8217;s starting edge in the block direction.<\/li><li><strong><code>block-end<\/code>:<\/strong> Positions the caption at the table&#8217;s starting edge in the block direction.<\/li><li><code><strong>inline-start<\/strong><\/code>: Positions the caption at the table&#8217;s starting edge in the inline direction.<\/li><li><strong><code>inline-end<\/code>:<\/strong> Positions the caption at the table&#8217;s starting edge in the inline direction.<\/li><li><strong><code>inherit<\/code>:<\/strong> Indicates that the value is inherited from the <code>caption-side<\/code> value of its parent<\/li><\/ul>\n\n\n\n<p>The&nbsp;<code>caption-side<\/code>&nbsp;property can be applied either to the&nbsp;<code>&lt;table&gt;<\/code>&nbsp;element or the&nbsp;<code>&lt;caption&gt;<\/code>&nbsp;element, with the same effect. While this property will affect the position of the caption box as a whole (a caption\u2019s&nbsp;<code>display<\/code> value computes to&nbsp;<code>table-caption<\/code>), it will not affect the alignment of text inside the box. Text inside the box may be aligned using the&nbsp;<code>text-align<\/code> property.<\/p>\n\n\n\n<p>Note that the above values for&nbsp;<code>caption-side<\/code>&nbsp;are relative to the table\u2019s <code>writing-mode<\/code>. For example, if a table is set to a vertical writing mode, then the&nbsp;<code>top<\/code>&nbsp;and&nbsp;<code>bottom<\/code>&nbsp;values will be relative to the direction of the table.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"examples-of-caption-side\">Examples of <code>caption-side<\/code><\/h3>\n\n\n<p>The demo below includes a \u201ctoggle\u201d button that toggles the table\u2019s&nbsp;<code>caption-side<\/code>&nbsp;property between&nbsp;<code>top<\/code>&nbsp;and&nbsp;<code>bottom<\/code>, so you can see the difference using a table with many rows of data:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwZjErJ\" src=\"\/\/codepen.io\/anon\/embed\/VwZjErJ?height=550&amp;theme-id=1&amp;slug-hash=VwZjErJ&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwZjErJ\" title=\"CodePen Embed VwZjErJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the next demo, the&nbsp;<code>writing-mode<\/code>&nbsp;for the table is set to&nbsp;<code>vertical-rl<\/code>. As demonstrated by toggling using the button, the&nbsp;<code>top<\/code>&nbsp;and&nbsp;<code>bottom<\/code>&nbsp;values are relative to the table\u2019s writing-mode:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvwWYpz\" src=\"\/\/codepen.io\/anon\/embed\/wvwWYpz?height=650&amp;theme-id=1&amp;slug-hash=wvwWYpz&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvwWYpz\" title=\"CodePen Embed wvwWYpz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-1\">Non-standard Firefox-only values<\/h3>\n\n\n<p>Firefox has long supported, and still supports, four non-standard values for&nbsp;<code>caption-side<\/code>:<\/p>\n\n\n\n<ul><li><code>left<\/code>: positions the caption to the left of the table.<\/li><li><code>right<\/code>: positions the caption to the right of the table.<\/li><li><code>top-outside<\/code>: positions the caption at the top of the table, with its dimensions independent of the table<\/li><li><code>bottom-outside<\/code>: positions the caption at the bottom of the table, with its dimensions independent of the table<\/li><\/ul>\n\n\n\n<p>The demo below works only in Firefox, and allows you to use four buttons to set the different non-standard values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jONreYw\" src=\"\/\/codepen.io\/anon\/embed\/jONreYw?height=550&amp;theme-id=1&amp;slug-hash=jONreYw&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jONreYw\" title=\"CodePen Embed jONreYw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>1+<\/td><td>1+<\/td><td>1+<\/td><td>9.2+<\/td><td>8+<\/td><td>2.1+<\/td><td>3.2+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Support in the table above refers to basic support for the standard <code>top<\/code> and <code>bottom<\/code> values. Firefox also additionally supports the non-standard <code>left<\/code>, <code>right<\/code>, <code>top-outside<\/code>, and <code>bottom-outside<\/code> values. There is no browser support for the new <code>block-start<\/code>, <code>block-end<\/code>, <code>inline-start<\/code>, and <code>inline-end<\/code> values.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-3\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/web.archive.org\/web\/20200424052741\/https:\/\/www.w3.org\/TR\/CSS21\/tables.html#caption-position\" rel=\"noopener\">CSS 2.1 specification<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20200424052741\/https:\/\/drafts.csswg.org\/css2\/tables.html#caption-position\" rel=\"noopener\">CSS 2.2 specification<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20200424052741\/https:\/\/drafts.csswg.org\/css-logical-props\/#caption-side\" rel=\"noopener\">CSS Logical Properties 1<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The caption-side property in CSS allows you to define where to position HTML&#8217;s &lt;caption&gt; element, used on HTML table headers. This property can also apply to any element whose display property is set to caption-side.<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[4547,651],"acf":[],"jetpack-related-posts":[{"id":14045,"url":"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/","url_meta":{"origin":248452,"position":0},"title":"display","date":"September 5, 2011","format":false,"excerpt":"Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. span.icon { display: inline-block; \/* Characteristics of block, but lays out inline *\/ } The default value for all elements is inline. Most \"User-Agent Stylesheets\" (the default styles\u2026","rel":"","context":"In \"display\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inline-block.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14134,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/width\/","url_meta":{"origin":248452,"position":1},"title":"width","date":"September 6, 2011","format":false,"excerpt":"The width property in CSS specifies the width of the element's content area. This \"content\" area is the portion inside the padding, border, and margin of an element (the box model). .wrap { width: 80%; } In the example above, elements that have a class name of .wrap will be\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18895,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/insert-images-within-figure-element-from-media-uploader\/","url_meta":{"origin":248452,"position":2},"title":"Insert Images within Figure Element from Media Uploader","date":"October 12, 2012","format":false,"excerpt":"For your functions.php file or a functionality plugin: function html5_insert_image($html, $id, $caption, $title, $align, $url) { $html5 = \"\"; $html5 .= \"\"; if ($caption) { $html5 .= \"$caption\"; } $html5 .= \"\"; return $html5; } add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 ); It also takes what you enter as a caption\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":248452,"position":3},"title":"font","date":"September 5, 2011","format":false,"excerpt":"The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14190,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","url_meta":{"origin":248452,"position":4},"title":"::first-line","date":"September 6, 2011","format":false,"excerpt":"The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3262,"url":"https:\/\/css-tricks.com\/snippets\/css\/meyer-reset\/","url_meta":{"origin":248452,"position":5},"title":"Meyer Reset","date":"August 6, 2009","format":false,"excerpt":"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/248452"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=248452"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/248452\/revisions"}],"predecessor-version":[{"id":363022,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/248452\/revisions\/363022"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=248452"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=248452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}