
- HTML Home
- HTML Roadmap
- HTML Introduction
- HTML History & Evolution
- HTML Editors
- HTML Basic Tags
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Fonts
- HTML Blocks
- HTML Style Sheet
- HTML Formatting
- HTML Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Frames
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Code Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Table Headers & Captions
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB & RGBA Colors
- HTML - HEX Colors
- HTML - HSL & HSLA Colors
- HTML - HSL Color Picker
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - Document Object Model (DOM)
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Character Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <th> Tag
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 −
<th> .... </th>
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 | col colgroup row rowgroup |
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>
Supported Browsers
Tag | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
th | Yes | Yes | Yes | Yes | Yes |