CSS properties - caption-side

revision:

caption-side property

- specifies the placement of a table caption.

CSS syntax : caption-side: top | bottom | initial | inherit;

Property values

top : puts the caption above the table. This is default

bottom : puts the caption below the table

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.captionSide="bottom"

example: caption-side property

caption-side: bottom:

Table 1.1 Customers
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbk�p Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

caption-side: top (default):

Table 1.1 Customers
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbk�p Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
code: 
                    <div>
                        <h4>caption-side: bottom:</h4>
                        <table id="example1" border="1">
                            <caption>Table 1.1 Customers</caption>
                            <tr>
                                <th>Company</th>
                                <th>Contact</th>
                                <th>Country</th>
                            </tr>
                            <tr>
                                <td>Alfreds Futterkiste</td>
                                <td>Maria Anders</td>
                                <td>Germany</td>
                            </tr>
                            <tr>
                                <td>Berglunds snabbk�p</td>
                                <td>Christina Berglund</td>
                                <td>Sweden</td>
                            </tr>
                            <tr>
                                <td>Centro comercial Moctezuma</td>
                                <td>Francisco Chang</td>
                                <td>Mexico</td>
                            </tr>
                            <tr>
                                <td>Ernst Handel</td>
                                <td>Roland Mendel</td>
                                <td>Austria</td>
                            </tr>
                        </table>
                        <h4>caption-side: top (default):</h4>
                        <table id="example2" border="1">
                            <caption>Table 1.1 Customers</caption>
                            <tr>
                                <th>Company</th>
                                <th>Contact</th>
                                <th>Country</th>
                            </tr>
                            <tr>
                                <td>Alfreds Futterkiste</td>
                                <td>Maria Anders</td>
                                <td>Germany</td>
                            </tr>
                            <tr>
                                <td>Berglunds snabbk�p</td>
                                <td>Christina Berglund</td>
                                <td>Sweden</td>
                            </tr>
                            <tr>
                                <td>Centro comercial Moctezuma</td>
                                <td>Francisco Chang</td>
                                <td>Mexico</td>
                            </tr>
                            <tr>
                                <td>Ernst Handel</td>
                                <td>Roland Mendel</td>
                                <td>Austria</td>
                            </tr>
                        </table>
                    </div>
                    <style>
                        #example1 {caption-side: bottom;}
                        #example2 {caption-side: top;}
                    </style>