Web | This Site

CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# CSS - caption-side

## Description:

The caption-side property determines the placement of the element box of a table.s caption.

## Possible Values:

- top: Places the caption's element box above the table box.
- bottom: Places the caption's element box below the table box.
- left: Places the caption's element box to the left of the table box.
- right: Places the caption's element box to the right of the table box.

## Applies to:

All the HTML positioned element.

## DOM Syntax:

object.style.captionSide="left";

## Example:

Here is the example which shows effect of this property:

    <style type="text/css">
    caption.top {caption-side:top}
    caption.bottom {caption-side:bottom}
    caption.left {caption-side:left}
    caption.right {caption-side:right}
    </style>

    <table style="width:400px; border:1px solid black;">
    <caption class="top">
    This caption will appear at the top
    </caption>

    <tr><td > Cell A</td></tr>
    <tr><td > Cell B</td></tr>
    </table>
    <br />

    <table style="width:400px; border:1px solid black;">
    <caption class="bottom">
    This caption will appear at the bottom
    </caption>
    <tr><td > Cell A</td></tr>
    <tr><td > Cell B</td></tr>

    </table>
    <br />

    <table style="width:400px; border:1px solid black;">
    <caption class="left">
    This caption will appear at the left
    </caption>
    <tr><td > Cell A</td></tr>

    <tr><td > Cell B</td></tr>
    </table>
    <br />

    <table style="width:400px; border:1px solid black;">
    <caption class="right">
    This caption will appear at the right

    </caption>
    <tr><td > Cell A</td></tr>
    <tr><td > Cell B</td></tr>
    </table>

This will produce following result:

This caption will appear at the top
Cell A
Cell B

This caption will appear at the bottom
Cell A
Cell B

This caption will appear at the left
Cell A
Cell B

This caption will appear at the right
Cell A
Cell B

To Become more comfortable - Do Online Practice

Advertisement

Online Image Processing

Indian Baby Names