HTML th Tag
Last Updated :
20 Dec, 2023
The <th> tag in HTML is used to set the header cell of a table. The working of both tags (<th> and <td>) are the same, but the text properties are different. In <th> text is bold and centered, and in <td> text is regular and left aligned by default.
There are 2 types of cells in the HTML Table:
- Header Cell: It is used to hold the header information.
- Standard Cell: It is used to hold the body of data.
SyntaxÂ
<th> Contents... </th>
Note: The <th>
 tag also supports the Global Attributes in HTML and Event Attributes in HTML.
Attributes
There are many attributes supported by HTML5 are listed below:Â
abbr
|
This attribute is used as an abbreviated version of the text content in a header cell.
|
colspan
|
Number of columns a header cell should span.
|
headers
|
Specifies one or more header cells a cell is related to.
|
rowspan
|
Set the number of rows a header cell should span.
|
scope
|
It is used to specify the score of header content.
|
There are many attributes supported by HTML4.1 but removed from HTML5 are listed below:Â
align
|
Set the alignment of the text content.
|
axis
|
Categories header cells.
|
bgcolor
|
Set the background color of a header cell.
|
char
|
Aligns the content in a header cell to a character.
|
charoff
|
It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.
|
height
|
Set the height of a header cell.
|
valign
|
It is used to set the vertical alignment of text content.
|
width
|
It is used to set the width of a header cell
|
Example 1: In this example, we will see the implementation of <th> tag in html.
HTML
<!DOCTYPE html>
< html >
<!DOCTYPE html>
< html >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h2 >th Tag</ h2 >
< table >
< thead >
< tr >
< th >Name</ th >
< th >User Id</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Shashank</ td >
< td >@shashankla</ td >
</ tr >
< tr >
< td >GeeksforGeeks</ td >
< td >@geeks</ td >
</ tr >
</ tbody >
</ table >
</ center >
</ body >
</ html >
|
Output:Â
Example 2: In this example, we will see the implementation of <th> tag in html.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML th Tag Example</ title >
< style >
body {
text-align: center;
}
th,
td {
border: 1px solid #dddddd;
padding: 8px;
}
table {
margin: 10px auto;
}
th {
background-color: #f2f2f2;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >Sample Table with
< code >< th ></ code > Tag
</ h2 >
< table >
< tr >
< th >Header 1</ th >
< th >Header 2</ th >
< th >Header 3</ th >
</ tr >
< tr >
< td >Row 1, Cell 1</ td >
< td >Row 1, Cell 2</ td >
< td >Row 1, Cell 3</ td >
</ tr >
< tr >
< td >Row 2, Cell 1</ td >
< td >Row 2, Cell 2</ td >
< td >Row 2, Cell 3</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Supported Browsers
- Google Chrome 15
- Edge 12 and above
- Firefox 1 and above
- Opera 12.1 and above
- Safari 1 and above
Share your thoughts in the comments
Please Login to comment...