HTML - Headers & Caption

In HTML, 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.

Basics of Table Heading

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.

Example

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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>

This example creates a table with headings for "Name" and "Salary" in the first row. The subsequent rows contain data corresponding to each heading.

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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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>

On executing the above program, it displays a table with stylized table headers.

Using '<th>' 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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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>

In this example, a secondary header row is introduced for "Additional Details" and "Specialization."

The '<thead>' tag

The <thead> tag is an essential component of HTML tables, representing the table header group. It is used to group the header content in a table, providing a structural container for defining column headers. The <thead> element is often paired with <tr> (table row) and <th> (table header) tags to create a well-organized and semantically correct table structure.

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.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Styled HTML Table Header</title>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
            </tr>
         </thead>
         <!-- Table body and other sections go here -->
      </table>
   </body>
</html>

In this example, the <thead> tag encapsulates a row ('<tr>') of table headers ('<th>').

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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled HTML Table Header</title>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <th>Sub Column 1</th>
            <th>Sub Column 2</th>
            <th>Sub Column 3</th>
         </tr>
      </thead>
      <!-- Table body and other sections go here -->
   </table>
</body>
</html>

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

The <colgroup> tag can be used within <thead> to define column groups and apply styling or attributes to entire columns.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled HTML Table Header</title>
</head>
<body>
   <table>
      <colgroup>
         <col style="background-color: lightgray;">
         <col style="background-color: lightblue;">
         <col style="background-color: lightgreen;">
      </colgroup>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <!-- Table body and other sections go here -->
   </table>
</body>
</html>

In this example, the <colgroup> tag is used to define column styling for the headers.

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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled HTML Table Header</title>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <tbody>
         <!-- Table body rows go here -->
      </tbody>
      <tfoot>
         <tr>
            <td>Total</td>
            <td></td>
            <td></td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

This structure separates header, body, and footer content for better organization.

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.

Table Caption

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

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.

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Caption</title>
</head>
<body>
   <table border="1" width="100%">
      <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> −

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table</title>
</head>
<body>
   <table border="1" width="100%">
      <thead>
         <tr>
            <td colspan="4">This is the head of the table</td>
         </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>
      </tbody>
   </table>
</body>
</html>
Advertisements