How to create table header in HTML?

The <th> element is used to define table header cells in HTML. It is typically placed within the <tr> element, which represents a table row.

The <th> element is similar to the <td> element used for regular table cells, but it is typically styled differently to visually distinguish the table header.

1. The <table> element represents the table itself.
2. Inside the table, we have a <tr> element, which represents a table row.
3. Within the table row, we have multiple <th> elements, each representing a table header cell.
4. In the above example, we have five header cells labeled "Header 1" through "Header 5".

Using CSS to style table headers#

You can use CSS to style the table headers. CSS provides various properties to customize the appearance of table headers, such as background color, font size, alignment, and borders.

1. The <style> tag is used to define CSS rules within the HTML document.
2. The CSS selector th targets all <th> elements in the document.
3. In this example, we set a background color of #f2f2f2, a font size of 18px, center alignment, and a bottom border of 2px solid #ccc

Using a table header group#

The <thead> element can be used to group table header content together. It provides a semantic way to distinguish the header section of a table, making it easier to style and manage.

1. The <thead> element is placed within the <table> element.
2. Inside the <thead> element, we have the table header row <tr> and its associated header cells <th>.
3. The <thead> element groups the header content together and separates it from the table body <tbody>.

Using a table caption#

You can add a caption to your table using the <caption> element. The caption provides a brief description or title for the table and is typically displayed above or below the table.

1. The <caption> element is used to define the table caption.
2. Inside the element, you can add the desired caption text, such as "Table Header Example".