Jobs Hub

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:

CSS Online Test

« Previous Tutorial Next Tutorial »