Categories
HTML 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

Categories
CSS Web development

CSS caption-side Property

CSS caption-side Property

The CSS caption-side property defines the placement of a table caption.

Demo:

Click the button to change the caption-side property of the caption element:

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

Syntax:

caption-side: top|bottom;

top (default) – puts the caption above the table.

bottom – puts the caption under the table.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
    }
#example1 {
  caption-side: bottom;
}

#example2 {
  caption-side: top;
}
</style>
</head>
<body>

<h4>caption-side: bottom;</h4>
<table id="example1" border="1">
  <caption id="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>

<h4>caption-side: top;</h4>
<table id="example2" border="1">
  <caption id="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:

caption-side: bottom;
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
caption-side: top;
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

HTML tbody tag, thead tag & tfoot tag