HTML Table Header

Introduction

In HTML, tables are used to display data in rows and columns. The <thead> tag is used to define the header row of a table. The header row is usually used to label the content in the columns below and hold descriptive labels.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Create a table

Create an index.html file and open it in your text editor. This is where you will write your HTML code.

Create a table using the <table> tag.

<table>
  <!-- content goes here -->
</table>

Add a table header

Add a <thead> tag to define the header row of the table. Inside the <thead> tag, add your table header rows using the <th> tag.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

Insert content into the table

Add content to the table by using the <tbody> tag and nested <tr> and <td> tags.

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

Style the table header

Use CSS to style the <thead> tag. Below is an example of changing the background color of the header to gray:

<style>
  thead {
    background-color: gray;
  }
</style>

Summary

The <thead> tag is used to define the header row of a table. It is another child element of the <table> tag and comes before the <tbody> and <tfoot> tags. Using CSS, you can style the table header to make it more visually appealing.