CSS caption-side Property

CSS caption-side Property


CSS caption-side Property
This property defines the position of a caption element within a tag.
 
Syntax -
caption-side: top | bottom | inherit 
 
Now we will see the values with their descriptions -
 
Value
Description
top
This puts the caption above the table, and this is the default value.
bottom
This puts the caption below the table
inherit
Inherits this property from its parent element.
 
Now we will see some Example -
Example  - Caption bottom -
<!DOCTYPE html>
<html lang="en">
<style>
  .one{
    margin: 20%;
    caption-side: bottom;

  }
li {
list-style-position: inside;
}
</style>


<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <table border = "1" class="one">
        <caption>This is a caption here</caption>
        <tr>
          <th>Thead One</th>
          <th>Thead two</th>
        </tr>

        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
        </tr>
   
   
        </table>
   
  </body>
</html>
     
</body>

</html>


 
Output -
Example - Caption top -
<!DOCTYPE html>
<html lang="en">
<style>
  .one{
    margin: 20%;
    caption-side: top;

  }
li {
list-style-position: inside;
}
</style>


<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <table border = "1" class="one">
        <caption>This is a caption here</caption>
        <tr>
          <th>Thead One</th>
          <th>Thead two</th>
        </tr>

        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
        </tr>
   
   
        </table>
   
  </body>
</html>
     
</body>

</html>


 
Output -