HTML Th Tag - W3Schools
Có thể bạn quan tâm
Example
A simple HTML table with three rows, two header cells and four data cells:
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr></table> Try it Yourself »More "Try it Yourself" examples below.
Definition and Usage
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
- Header cells - contains header information (created with the <th> element)
- Data cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
Browser Support
Element | |||||
---|---|---|---|---|---|
<th> | Yes | Yes | Yes | Yes | Yes |
Attributes
Attribute | Value | Description |
---|---|---|
abbr | text | Specifies an abbreviated version of the content in a header cell |
colspan | number | Specifies the number of columns a header cell should span |
headers | header_id | Specifies one or more header cells a cell is related to |
rowspan | number | Specifies the number of rows a header cell should span |
scope | col colgroup row rowgroup | Specifies whether a header cell is a header for a column, row, or group of columns or rows |
Global Attributes
The <th> tag also supports the Global Attributes in HTML.
Event Attributes
The <th> tag also supports the Event Attributes in HTML.
More Examples
Example
How to align content inside <th> (with CSS):
<table style="width:100%"> <tr> <th style="text-align:left">Month</th> <th style="text-align:left">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr></table> Try it Yourself »Example
How to add background-color to table header cell (with CSS):
<table> <tr> <th style="background-color:#FF0000">Month</th> <th style="background-color:#00FF00">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself »Example
How to set the height of a table header cell (with CSS):
<table> <tr> <th style="height:100px">Month</th> <th style="height:100px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table> Try it Yourself »Example
How to specify no word-wrapping in table header cell (with CSS):
<table> <tr> <th>Month</th> <th style="white-space:nowrap">My Savings for a new car</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table> Try it Yourself »Example
How to vertical align content inside <th> (with CSS):
<table style="width:50%;"> <tr style="height:100px"> <th style="vertical-align:bottom">Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table> Try it Yourself »Example
How to set the width of a table header cell (with CSS):
<table style="width:100%"> <tr> <th style="width:70%">Month</th> <th style="width:30%">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table> Try it Yourself »Example
How to create table headers:
<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr></table> Try it Yourself »Example
How to create a table with a caption:
<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself »Example
How to define table cells that span more than one row or one column:
<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr></table> Try it Yourself »Related Pages
HTML tutorial: HTML Tables
HTML DOM reference: TableHeader Object
CSS Tutorial: Styling Tables
Default CSS Settings
Most browsers will display the <th> element with the following default values:
th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center;} ❮ Previous Complete HTML Reference Next ❯ ★ +1 Track your progress - it's free! Log in Sign UpTừ khóa » Html Th Column Width
-
HTML |
Width Attribute - GeeksforGeeks Column Width For
Not Working - Stack Overflow HTML Table Sizes - W3Schools
HTML Th Width Attribute
Stop Using To Set Table Width In HTML: Here's Why »
Changing Column Width - The Complete HTML5 Tutorial
Table-layout - CSS: Cascading Style Sheets - MDN Web Docs
: The Table Column Element - HTML - MDN Web Docs - Mozilla HTML Table Column Width - Tutorial Kart
Advanced Table Settings: Column Width, Alignment And Merging Cells
How To Set The Table Column Width Regardless Of The Text Amount ...
Chapter 3. How To Specify Tables And Columns Width
Tables In HTML Documents
Making A Wild Card Column Width - Tables
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu