Test caption-side in four directions - HTML CSS CSS Property

HTML CSS examples for CSS Property:caption-side

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

Description

Test caption-side in four directions

Demo Code

ResultView the demo in separate window 

<html>
   <head>

      <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>

   </head><!-- w ww.  j  av a  2 s .c  o  m-->
   <body>

      <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>

   </body>
</html>

Related Tutorials