80 HTML Table Headers and Captions

Table Headers and Captions

Headers and captions are used inside tables 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 in the tables to provide a title or explanation for the table. The <caption> element is placed immediately after the opening table tag.

HTML Table Headers and Captions

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.

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 to Create Table's Header and Caption

The following is the syntax to create a header and caption for an HTML table:

<table>
<caption>Description of table</caption>
<tr>
   <th>heading 1</th>
   <th>heading 2</th>
   <th>heading 3</th>
</tr>
</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.

Example

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.

Example

This example demonstrates how you can style table headings with CSS:

<!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.

Example

In this example, we are creating table headers in the first row:

<!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>

Table Header 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.

Example

In this example, we are creating a table header using the thead tag:

<!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.

Example

In this example, we are defining two rows as the table header:

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

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

<body>
<table border=1>
   <thead>
      <tr>
         <th colspan=2>Codeheap</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.

Example

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.

Example

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 highlight 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.

Example

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>

Example

In this example, we are creating an HTML table with the table header, body, and footer:

<!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>

Comments

Post a Comment

Popular posts from this blog

79 HTML - Tables

Image
HTML tables   represent data, such as text, images, etc. in a structured format with rows and columns. HTML tables  offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development. Why HTML Tables are Used? HTML tables are used for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include − Structuring Data  − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information. Comparative Presentation  − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format. Tabular Data Representation  − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables. Creating an HTML Table You can create a table in HTML by using t...
Read more