CSS caption-side

The CSS caption-side property is used to position the table caption either to top or bottom of the table. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 30px 0; background: rgba(140, 140, 140, 0.3); padding: 12px;}
      table tr th, td{border: 1px solid;}
      div.a{caption-side: bottom;}
      div.b{caption-side: top;}
   </style>
</head>
<body>

   <div class="a">
      <table>
         <caption>Top 5 Students Last Year</caption>
         <tr>
            <th>Name</th>
            <th>Course</th>
         </tr>
         <tr>
            <td>Jayden</td>
            <td>Applied Data Science and Artificial Intelligence</td>
         </tr>
         <tr>
            <td>Thomas</td>
            <td>Information Technology</td>
         </tr>
         <tr>
            <td>Finn</td>
            <td>Creative Media and Game Technologies</td>
         </tr>
         <tr>
            <td>Sven</td>
            <td>Information and Communication Technology</td>
         </tr>
         <tr>
            <td>Lieke</td>
            <td>Applied Data Science and Artificial Intelligence</td>
         </tr>
      </table>
   </div>

   <div class="b">
      <table>
         <caption>Top 5 Students This Year</caption>
         <tr>
            <th>Name</th>
            <th>Course</th>
         </tr>
         <tr>
            <td>Jesse</td>
            <td>Data Science</td>
         </tr>
         <tr>
            <td>Lucas</td>
            <td>Applied Data Science and Artificial Intelligence</td>
         </tr>
         <tr>
            <td>Naomi</td>
            <td>Information and Communication Technology</td>
         </tr>
         <tr>
            <td>Ruben</td>
            <td>Information Technology</td>
         </tr>
         <tr>
            <td>Julian</td>
            <td>Applied Data Science and Artificial Intelligence</td>
         </tr>
      </table>
   </div>
   
</body>
</html>
Output
Top 5 Students Last Year
Name Course
Jayden Applied Data Science and Artificial Intelligence
Thomas Information Technology
Finn Creative Media and Game Technologies
Sven Information and Communication Technology
Lieke Applied Data Science and Artificial Intelligence
Top 5 Students This Year
Name Course
Jesse Data Science
Lucas Applied Data Science and Artificial Intelligence
Naomi Information and Communication Technology
Ruben Information Technology
Julian Applied Data Science and Artificial Intelligence

Note - The table caption basically indicates the title of the table.

CSS caption-side Syntax

The syntax of caption-side property in CSS, is:

caption-side: x;

The value of x should be any of the following:

  • top - move the caption to top of the table. This is the default value
  • bottom - move the caption to bottom of the table
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋