HTML th Tag
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:
Attributes |
Descriptions |
---|---|
This attribute is used as an abbreviated version of the text content in a header cell. |
|
Number of columns a header cell should span. |
|
Specifies one or more header cells a cell is related to. |
|
Set the number of rows a header cell should span. |
|
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:
Attributes |
Descriptions |
---|---|
Set the alignment of the text content. |
|
Categories header cells. |
|
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. |
Set the height of a header cell. |
|
It is used to set the vertical alignment of text content. |
|
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 >w3wiki</ h1 > < h2 >th Tag</ h2 > < table > < thead > < tr > <!-- th tag starts here --> < th >Name</ th > < th >User Id</ th > <!-- th tag end here --> </ tr > </ thead > < tbody > < tr > < td >Shashank</ td > < td >@shashankla</ td > </ tr > < tr > < td >w3wiki</ td > < td >@Beginner</ 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;" > w3wiki </ 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