HTML Table Head

In HTML, tables are used to display data in a grid format. The <thead> element specifically defines a set of header rows in a table. This helps to organize and label the columns of data in the table.

Here's a breakdown of how the <thead> element is used, along with an example:

Syntax

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Explanation

<table>: The container element for the table.
<thead>: Contains the header row(s) of the table.
<tr>: Represents a row in the table.
<th>: Defines a header cell. Text in <th> elements is typically bold and centered.
<tbody>: Contains the body rows of the table.
<td>: Represents a data cell in the table.

Example

Here's a simple HTML table with headers using the <thead> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>28</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>Smith</td>
                <td>32</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, the table has a header row with three columns: "First Name," "Last Name," and "Age." The thead section contains this header row, which makes it clear that these are the column headings. The tbody section contains the actual data rows for the table.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us