Caption-side

In this chapter, we will learn about CSS caption-side property and how to use it in our websites.

The caption-side property defines the place of a table's caption.

As you remember <caption> tag is used to give a title for a table.

We can place the title (caption) of the table at bottom or top of the table.

CSS Syntax

caption-side: top | bottom | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
          caption {
              caption-side: top;
          }
      </style>
   </head>
   <body>

        <table border="1">
            <caption>Point Table at the Top of Armenian Premier League</caption>
            <tr>
                <th>Team</th>
                <th>Played</th>
                <th>Points</th>
            </tr>
            <tr>
                <td>Ulisses</td>
                <td>15</td>
                <td>34</td>
            </tr>
            <tr>
                <td>Pyunik</td>
                <td>15</td>
                <td>33</td>
           </tr>
           <tr>
               <td>Shirak</td>
               <td>15</td>
               <td>25</td>
          </tr>
          <tr>
              <td>Gandzasar</td>
              <td>15</td>
              <td>19</td>
          </tr>
      </table>

   </body>
</html>

Here is the result:



Property Values

Value Descriptions
top It places the caption above the table. It is the default value of this property.
bottom IIt places the caption below the table.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.