Categories
Web development

HTML caption tag

HTML caption tag

The HTML caption element specifies a table caption.

The HTML <caption> tag has to be inserted immediately after the <table> tag.

To align and place caption you can use CSS caption-side property or CSS text-align property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
        border: 1px solid black;
    }

</style>
</head>
<body>
<table>
<caption>List of employees:</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

List of employees:
Name Job Title e-mail
Adam White IT Coordinator white@example.com
Tom Brown Web Developer brown@example.com
Matt Smith Network Administrator matt@example.com

Enjoy coding!

Read also:

HTML Table

HTML Table Headers

CSS border-collapse Property