caption-side

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No ? Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value Top
Inherited Yes
Applied To <CAPTION> or to all elements having the value "table-caption" of "display"
HTML analog <caption align="top | bottom">
Reference to specification http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side

Description
With the help of the tag <CAPTION> you can determine the banner location of a table. The parameter caption-side outputs the banner before and after a table. Attribute «text-align» determines left and right border adequation. The browser Firefox supports this function, but these values are not supported by CSS.


Syntax

caption-side: top | bottom

Arguments
top
It locates a banner at the top of a table.
bottom
It locates a banner at the bottom of a table.
right
It can work only in Firefox and Mozilla. This argument locates a banner on the right of a table.
left
It can work only in Firefox and Mozilla. This argument locates a banner on the left of a table.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Расположение заголовка</title>
  <style type="text/css">
    table {
     width: 350px; /* Table width */ 
     border-collapse: collapse; /* Remove double frame between cells */ 
    }
    td {
     border: 1px solid green; /* Border parameters */ 
     padding: 5px; /* Areas in the cell */ 
    }
    caption { 
     caption-side: bottom; /* Title under the table */ 
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Kart deal</caption>
    <tr>
     <td>&nbsp;</td>
     <td>&spades;</td>
     <td>&clubs;</td>
     <td>&hearts;</td>
     <td>&diams;</td>
    </tr>
    <tr>
     <td>Cheburashka</td>
     <td>6</td><td>3</td>
     <td>1</td><td>3</td>
    </tr>
    <tr>
     <td>Gena Crocodile </td>
     <td>1</td><td>5</td>
     <td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Shapoklyak</td>
     <td>3</td>
     <td>4</td>
     <td>6</td>
     <td>0</td>
    </tr>
    <tr>
     <td>Rat Larisa</td>
     <td>3</td>
     <td>1</td>
     <td>1</td>
     <td>8</td>
    </tr>
   </table>
 </body>
</html>
The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.captionSide