Teach with us

Usage of CSS caption-side property

The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table.

Example

This property can have one of the four values top, bottom, left or right. Let us seen an example to learn how to implement caption-side property:

<html>
   <head>
      <style>
         caption.top {
            caption-side:top
         }
         caption.bottom {
            caption-side:bottom
         }
      </style>
   </head>
   <body>
      <table style = "width:500px; border:3px solid gray;">
         <caption class = "top">
            Countries (Top Caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
      <table style = "width:500px; border:3px solid blue;">
         <caption class = "bottom">
            Countries (Bottom caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
   </body>
</html>
karthikeya Boyini
karthikeya Boyini

I love programming (: That's all I know

Updated on 31-Jan-2020 10:01:27

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements