HTML Table Caption Tutorial

HTML Table Caption

HTML Table Caption is used to display a text on the top or bottom side of the table. Also, the alignment of the caption can be set using text-align property.

Examples

In the following example, we specify the caption for table using <caption> tag.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Fruit Stocks</caption>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
        <th>Available in (Months)</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
          <td>0.5</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

As in the above output, the default location of caption is top center.

Caption Side Bottom

Now, let us change the location of caption to bottom of table using caption-side in style property.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <caption style="caption-side:bottom">Fruit Stocks</caption>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
        <th>Available in (Months)</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
          <td>0.5</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Align Caption to Left

In the following example, we align the caption to left using text-align property.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <caption style="text-align:left">Fruit Stocks</caption>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
        <th>Available in (Months)</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
          <td>0.5</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Similarly, we can align the caption to right side of the table.

Conclusion

In this HTML Tutorial, we learned about HTML Table Caption, and how to place it at the top or bottom of table, with examples.

TutorialKart

HTML Table Caption