HTML - Tag - Tutorialspoint

Maybe your like

HTML - <th> Tag Previous Quiz Next

Introduction to <th> Tag

The HTML <th> tag is used to define a header cell in a table. It is used within the <tr> element and provides header for the table rows or columns. By default, the text inside the <th> tag is bold and centered to distinguish it from standard table cells (<td>).

The <th> element can have attributes like the colspan (to span multiple columns), rowspan (to span multiple rows) , and scope.

Syntax

Following is the syntax of HTML <th> tag −

Attributes

HTML th tag supports Global and Event attributes of HTML. It also accepts some specific attributes as well which are listed bellow.

Attribute	Value	Description
abbr	text	Specifies an abbreviated of the content in a header cell
colspan	number	Specifies the number of columns.
headers	header_id	Specifies one or more header cells a cell is related to.
rowspan	number	Specifies the number of rows a cell should take.
scope	colcolgrouprowrowgroup	Specifies whether a header cell is a header for a column, row, or group of columns or rows.

Example : Basic Table with Headers

Let's look at the following example, where we are going to consider the basic usage of the <th> tag.

<!DOCTYPE html> <html> <style> table, th, td { border: 2px solid #D2B4DE; } </style> <body> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Maya</td> <td>23</td> </tr> <tr> <td>Ravi</td> <td>22</td> </tr> <tr> <td>Ram</td> <td>21</td> </tr> </table> </body> </html>

Example : Using colspan Attribute

Consider the following example, where we are going to use the colspan attribute along with the <th> tag.

<!DOCTYPE html> <html> <body> <table border="1"> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <th>Name</th> <th>DOB</th> </tr> <tr> <td>Hardin</td> <td>1999</td> </tr> <tr> <td>Tessa</td> <td>2000</td> </tr> </table> </body> </html>

Example : Using rowspan Attribute

In the following example, we are going to use the rowspan attribute along with the <th> tag.

<!DOCTYPE html> <html> <body> <table border="1"> <tr> <th rowspan="3">Krishna</th> <th>Product</th> <th>Price</th> </tr> <tr> <td>Fruits</td> <td>$100</td> </tr> <tr> <td>Vegetables</td> <td>$50</td> </tr> </table> </body> </html>