HTML <th> 標籤
示例
一個簡單的 HTML 表格,包含三行、兩個表頭單元格和四個資料單元格
<table>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<th>
標籤定義 HTML 表格中的表頭單元格。
HTML 表格有兩種單元格
- 表頭單元格 - 包含表頭資訊(使用
<th>
元素建立) - 資料單元格 - 包含資料(使用 <td> 元素建立)
<th>
元素的文字預設是粗體居中的。
<td> 元素的文字預設是普通體左對齊的。
瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
<th> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
abbr | text | 指定表頭單元格內容的縮寫版本 |
colspan | 數字 | 指定表頭單元格應跨越的列數 |
headers | header_id | 指定一個單元格相關的多個表頭單元格 |
rowspan | 數字 | 指定表頭單元格應跨越的行數 |
scope | col colgroup row(行) rowgroup |
指定表頭單元格是列、行或列/行組的表頭 |
全域性屬性
<th>
標籤也支援 HTML 中的全域性屬性。
事件屬性
<th>
標籤也支援 HTML 中的事件屬性。
更多示例
示例
如何在 <th> 中對齊內容(使用 CSS)
<table style="width:100%">
<tr>
<th style="text-align:left">月份</th>
<th style="text-align:left">儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己動手試一試 »
示例
如何向表頭單元格新增背景顏色(使用 CSS)
<table>
<tr>
<th style="background-color:#FF0000">月份</th>
<th style="background-color:#00FF00">儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何設定表頭單元格的高度(使用 CSS)
<table>
<tr>
<th style="height:100px">月份</th>
<th style="height:100px">儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何在表頭單元格中指定不換行(使用 CSS)
<table>
<tr>
<th>月份</th>
<th style="white-space:nowrap">我的新車儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何在 <th> 中垂直對齊內容(使用 CSS)
<table style="width:50%;">
<tr style="height:100px">
<th style="vertical-align:bottom">月份</th>
<th style="vertical-align:bottom">儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何設定表頭單元格的寬度(使用 CSS)
<table style="width:100%">
<tr>
<th style="width:70%">月份</th>
<th style="width:30%">儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何建立表頭
<table>
<tr>
<th>姓名</th>
<th>電子郵件</th>
<th>電話</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
自己動手試一試 »
示例
如何建立帶標題的表格
<table>
<caption>每月儲蓄</caption>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己動手試一試 »
示例
如何定義跨越多行或多列的表格單元格
<table>
<tr>
<th>姓名</th>
<th>電子郵件</th>
<th colspan="2">電話</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>
自己動手試一試 »
相關頁面
HTML 教程:HTML 表格
HTML DOM 參考:TableHeader 物件
CSS 教程:表格樣式
預設 CSS 設定
大多數瀏覽器將顯示 <th>
元素,預設值為:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}