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 »