HTML - Headers & Caption

Previous
Next

Headers and Captions are used inside tables are used to organize and present data in a structured format.

The table heading is an essential part of a table, providing labels for columns. The <th> (table header) element is used to define table headings.

Captions are used with in the tables to provide a title or explanation for the table. The <caption> element is placed immediately after the opening table tag.

The <caption> tag is deprecated in HTML5 and XHTML. This means that it is still supported by most web browsers, but it is not recommended for use in new web pages. If you are writing new code, you should use the figure and figcaption elements instead. The figure element is used to group related content, and the figcaption element is used to provide a caption for the content.

Syntax

<table>
<caption>Description of table</caption>
<tr>
   <th>heading 1</th>
   <th>heading 2</th>
   <th>heading 3</th>
</tr>
</table>

Examples of HTML headers and captions

Here are some examples that illustrate how to use headers and captions in a HTML table.

Define a header row for a table

The <th> tag is used to represent table headings, and it is typically used within the <tr> (table row) element. Unlike the <td> (table data) tag used for regular cells, <th> is reserved for headers. In most cases, the first row of a table is designated as the header row.

Consider a simple HTML table with headings for "Name" and "Salary" 

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

Styling Table Headings

Styling table headings can enhance the visual appeal of a table. CSS can be applied to <th> elements to customize their appearance. In the following example, a simple CSS style is added to the <style> tag within the <head> section to modify the background color and text alignment of the table headings.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
   th {
      background-color: #4CAF50;
      color: white;
      text-align: left;
      padding: 8px;
   }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

Using header cells in Any Row

While it's common to use <th> in the first row of a table, you can utilize it in any row based on your requirements. This flexibility allows for the creation of complex tables with multiple header rows or headers interspersed within the table.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
      th {
         background-color: #4CAF50;
         color: white;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <th>Additional Details</th>
      <th>Specialization</th>
   </tr>
   <tr>
      <td>Technical Lead</td>
      <td>Web Development</td>
   </tr>
   </table>
</body>

</html>

Using <thead> Element

The <thead> tag is used to group table header cells so that a combined CSS style can be applied to header cells.

The <thead> tag is typically placed within the <table> element and contains one or more <tr> elements, each of which, in turn, contains <th> elements representing column headers.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border=1>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <!-- Table body goes here -->
   </table>
</body>

</html>

Defining Multiple Header Rows

You can include multiple <tr> elements within <thead> to create multiple header rows. This is useful when your table structure requires a more complex hierarchy of headers.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
<table border=1>
   <thead>
      <tr>
         <th colspan=2>Tutorialspoint</th>
      </tr>
      <tr>
         <th>Role</th>
         <th>Experience</th>
      </tr>
   </thead>
   <tr>
      <td>Technical Lead</td>
      <td>5 Years</td>
   </tr>
   <tr>
      <td>Web Developer</td>
      <td>2 Years</td>
   </tr>
</table>
</body>

</html>

Using ‘<colgroup>’ Inside ‘<thead>’

The <colgroup> tag can be used within <thead> to group together a set of column and apply CSS styling or attributes to entire columns.

In this example we apply style to first two columns of table by grouping those columns in colgroup tag. 

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .col1 {
         background-color: #f2f2f2;
      }
   </style>
</head>

<body>
   <h1>Table with colgroup</h1>
   <table border="1">
      <colgroup class="col1">
         <col  style="width: 150px;">
         <col  style="width: 200px;">
      </colgroup>
         <col  style="width: 150px;">
         <col  style="width: 100px;">
      <thead>
         <tr>
               <th>Product ID</th>
               <th>Product Name</th>
               <th>Category</th>
               <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
               <td>1</td>
               <td>Smartphone</td>
               <td>Electronics</td>
               <td>$299.00</td>
         </tr>
         <tr>
               <td>2</td>
               <td>Office Chair</td>
               <td>Furniture</td>
               <td>$89.00</td>
         </tr>
         <tr>
               <td>3</td>
               <td>Laptop</td>
               <td>Electronics</td>
               <td>$999.00</td>
         </tr>
      </tbody>
   </table>
</body>

</html>

Combining with ‘<tfoot>’ and ‘<tbody>’

The <thead> tag is often combined with <tfoot> (table footer) and <tbody> (table body) to create a comprehensive table structure.

In the following code the structure of table separates header, body, and footer content for better organization.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>

      <tbody>
         <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
         </tr>
      </tbody>

      <tfoot>
         <tr>
            <td>Total</td>
            <td></td>
            <td></td>
         </tr>
      </tfoot>
   </table>
   <p>
      Footers are generally used to enter 
      sum of values of each column.
   </p>
</body>

</html>

Difference between <thead> and <th>

Following are the points that highlights the differences between <thead> and <th> −

  • The <thead> tag is a structural element used to group header content, while <th> is a cell-level element defining a header cell.
  • It's common to use <th> within <thead>, but <th> can also be used outside <thead> to define headers in regular rows.
  • Including <thead> is optional; however, using it improves the semantic structure of the table.

Adding caption to a HTML Table

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.

In the following code we will display a caption on top of a HTML table 

<!DOCTYPE html>

<html>
<head>
   <title>HTML Table Caption</title>
</head>

<body>
   <table border="1">
      <caption>This is the caption</caption>
      <tr>
         <td>row 1, column 1</td>
         <td>row 1, column 2</td>
      </tr>
      <tr>
         <td>row 2, column 1</td>
         <td>row 2, column 2</td>
      </tr>
   </table>
</body>

</html>

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

  • The <thead> tag to create a separate table header.
  • The <tbody> tag to indicate the main body of the table.
  • The <tfoot> tag to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody> 

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border="1" width="100%">
      <thead>
         <tr>
            <th colspan="4">
               This is the head of the table
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">
               This is the foot of the table
            </td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
         </tr>
      </tbody>
   </table>
</body>

</html>
Print Page
Previous
Next
Advertisements