HTML <th> 标签
HTML <th> 元素定义表格内的表头单元格。
实例
普通的 HTML 表格,包含两行两列:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>th 元素内容不换行</h1>
<table>
<tr>
<th>月份</th>
<th style="white-space:nowrap">我为了买新车而攒钱(希望我将来能买一辆)</th>
</tr>
<tr>
<td>1月</td>
<td>$100</td>
</tr>
<tr>
<td>2月</td>
<td>$80</td>
</tr>
</table>
<p>Table 不换行:</p>
<table>
<tr>
<th>月份</th>
<th>我为了买新车而攒钱(希望我将来能买一辆)</th>
</tr>
<tr>
<td>1月</td>
<td>$100</td>
</tr>
<tr>
<td>2月</td>
<td>$80</td>
</tr>
</table>
<p><b>备注:</b> 您可能必须缩小浏览器窗口才能看到效果。</p>
</body>
</html>
<html>
<body>
<table border="1">
<tr>
<th>公司</th>
<th>地址</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>加利福尼亚州的库比蒂诺</td>
</tr>
</table>
</body>
</html>
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:
表头单元格 - 包含表头信息(由 th 元素创建)
标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
浏览器支持
元素 | |||||
---|---|---|---|---|---|
<th> | Yes | Yes | Yes | Yes | Yes |
所有浏览器都支持 <th> 标签。
提示和注释
提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性是不建议使用的。
在 XHTML 1.0 Strict DTD 中,不支持 th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性。
可选的属性
属性 | 值 | 描述 |
---|---|---|
abbr | text | 规定单元格中内容的缩写版本。 |
align |
| 规定单元格内容的水平对齐方式。 |
axis | category_name | 对单元格进行分类。 |
bgcolor |
| 不推荐使用。请使用样式替代它。 规定表格单元格的背景颜色。 |
char | character | 规定根据哪个字符来进行内容的对齐。 |
charoff | number | 规定对齐字符的偏移量。 |
colspan | number | 设置单元格可横跨的列数。 |
headers | idrefs | 由空格分隔的表头单元格 ID 列表,为数据单元格提供表头信息。 |
height |
| 不推荐使用。请使用样式替代它。 规定表格单元格的高度。 |
nowrap | nowrap | 不推荐使用。请使用样式取而代之。 规定单元格中的内容是否换行。 |
rowspan | number | 规定单元格可横跨的行数。 |
scope |
| 定义将表头数据与单元数据相关联的方法。 |
valign |
| 规定单元格内容的垂直排列方式。 |
width |
| 不推荐使用。请使用样式取而代之。 规定表格单元格的宽度。 |
全局属性
<th> 标签支持 HTML 中的 全局属性。
事件属性
<th> 标签支持 HTML 中的 事件属性。
相关页面
HTML DOM 参考手册:TableHeader 对象
更多实例
th元素内容垂直对齐
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>th 中的内容垂直对齐方式</h1>
<table style="width:50%;">
<tr style="height:100px">
<th style="vertical-align:bottom">月份</th>
<th style="vertical-align:bottom">结余</th>
</tr>
<tr>
<td>1月</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
th标签默认样式
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}