html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS caption-side property

Definition

The CSS caption-side property allows us to specify a position for a table caption.

Applies To

All table-caption elements.

Property Values

bottom - Caption is positioned below the table.

inherit - Caption attributes are inherited from the parent element.

top - Caption is positioned above the table.

Default Value

Default value is set to top.

Inheritance

The caption-side properties are inherited from the parent element if none are applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS caption-side property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS caption-side Property</title>

<!-- Valid values for CSS caption-side Property are:
	
	bottom, inherit and top. 
	
--> 

<style type="text/css">

/* Style Tables */
table, td {
  border: 2px solid red;
}

/* Caption bottom */
#table1 {
  caption-side: bottom;
}

/* Caption top */
#table2 {
  caption-side: top;
}
</style>
</head>

<body>
<h1>The caption-side CSS property</h1>
<h2>Bottom Caption</h2>
<table id="table1">
  <caption>Caption Names A Table</caption>
	<tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h2>Top Caption</h2>
<table id="table2">
  <caption>Caption Names A Table</caption>
	<tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
</body>
</html>

How It Looks

The results of using the caption-side property with the values above will look something like the following:

notepad
CSS bottom    << Prev          Next >>   CSS clear

go to home page Homepage go to top of page Top


CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.