caption-side - HTML CSS CSS Property

HTML CSS examples for CSS Property:caption-side

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. caption-side

Description

The caption-side CSS property sets the vertical position of the table caption box.

The following table summarizes the caption-side Property.

Item Value
Default value: top
Applies to:The table <caption> element
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


caption-side:      top | bottom | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
top Positions the caption box above the table box.
bottom Positions the caption box below the table box.
initial Sets this property to its default value.
inherit take the value of its parent element caption-side property.

The example below shows the caption-side property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS caption-side property</title>
  <style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }<!--  w w  w  . j a  va 2s.c o m-->
    caption {
    caption-side: bottom;
  }
</style>
 </head>
 <body>
  <table>
   <caption>
    Table 1.0 - User Details
   </caption>
   <thead>
    <tr>
     <th>No.</th>
     <th>Name</th>
     <th>Email</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>Tom</td>
     <td>e@mail.com</td>
    </tr>
    <tr>
     <td>2</td>
     <td>Mary</td>
     <td>w@mail.com</td>
    </tr>
    <tr>
     <td>3</td>
     <td>Edith</td>
     <td>d@mail.com</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Related Tutorials