<thead> : Table Head element

by

Introduction

The <thead> element in HTML represents the group of rows in a table that contain the headings of the columns. It’s typically used to structure the top part of a table where column labels or headers are placed. This element is often paired with <th> (table header cell) elements to define those headings.

Here’s a basic example of how you might use <thead> in conjunction with <th>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    thead{
      background-color: grey;
    }
  </style>
</head>
<body>
  <table border="2">
    <caption>
      Council budget (in £) 2018
    </caption>
    <thead>
      <tr>
        <th scope="col">Items</th>
        <th scope="col">Expenditure</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Donuts</th>
        <td>3,000</td>
      </tr>
      <tr>
        <th scope="row">Stationery</th>
        <td>18,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Totals</th>
        <td>21,000</td>
      </tr>
    </tfoot>
  </table>  
</body>
</html>

Output :

In this example, we will show heading section different by the others by applying background colour on <thead> , and the <thead> element contains one <tr> (table row) element with three <th> elements representing the headings for three columns. The actual data is typically placed within the <tbody> (table body) element, but the <thead> helps structure the table and improve accessibility by associating column headers with their respective data.

Leave a Comment