mozilla

Revision 28035 of caption-side

  • Revision slug: CSS/caption-side
  • Revision title: caption-side
  • Revision id: 28035
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment create

Revision Content

{{template.CSSRef()}}

Summary

caption-side positions the the content of table-caption at the specified side.

  • {{template.Xref_cssinitial()}}: top
  • Applies to: 'table-caption' elements
  • {{template.Xref_cssinherited()}}: yes
  • Percentages: n/a
  • Media: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}:

Syntax

caption-side: top | bottom | left | right | inherit

Values

top
caption box will be above the table.
bottom
caption box will be below the table.
left
caption box will be on the left side of the table.
right
caption box will be on the right side of the table.

Examples

{{template.CSSRefExampleLink("caption-side")}}

.contentbox table-caption{
  caption-side: bottom;
}

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ?
Firefox ?
Netscape ?
Opera ?
Safari ?

See also

{{wiki.template('CSS_Reference:Table_Properties')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><b>caption-side</b> positions the the content of table-caption at the specified side.
</p>
<ul><li> {{template.Xref_cssinitial()}}: top 
</li><li> Applies to: 'table-caption' elements 
</li><li> {{template.Xref_cssinherited()}}: yes 
</li><li> Percentages: n/a
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}:
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">caption-side: top | bottom | left | right | inherit

</pre>
<h3 name="Values"> Values </h3>
<dl><dt>top</dt><dd> caption box will be above the table. 
</dd><dt>bottom</dt><dd> caption box will be below the table. 
</dd><dt>left</dt><dd> caption box will be on the left side of the table. 
</dd><dt>right</dt><dd> caption box will be on the right side of the table. 
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("caption-side")}}
</p>
<pre class="eval">.contentbox table-caption{
  caption-side: bottom;
}
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/tables.html#caption-position">W3C Cascading Style Sheets, level 2 revision 1</a> 
</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#q6">W3C Cascading Style Sheets, level 2</a>
</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#tables">W3C Cascading Style Sheets, level 3</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>?</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{wiki.template('CSS_Reference:Table_Properties')}}
</p>
Revert to this revision