html元素th标签的使用方法及作用
html元素th标签是用来定义表格的表头单元格的，其使用方法及作用详解如下：
<th>标签的定义
<th>标签"table header cell"的缩写，是定义HTML表格的表头单元格。
HTML表格有两种单元格类型：
表头单元格➜由<th>标签创建的表头信息，其文本默认为居中的粗体文本；
标准单元格➜由<td>标签创建的数据信息，其文本默认为左对齐的普通文本；
浏览器支持情况
<th>标签已被所有主流浏览器支持；
<th>标签的用法
<th>标签定义表格的表头单元格，分为两类，一是水平表头单元格，二是垂直表头单元格。
1、水平表头单元格
水平表头单元格的所有<th>标签都应放在第1行的<tr>和</tr>之间，演示代码如下：
<table border="1"> <caption>表格的标题</caption> <tr><th>第1个表头单元格</th><th>第2个表头单元格</th></tr> <tr><td>第2行,第1列</td><td>第2行,第2列</td></tr> <tr><td>第3行,第1列</td><td>第3行,第2列</td></tr> <tr><td>第4行,第1列</td><td>第4行,第2列</td></tr> </table>
以上水平表头单元格的表格代码在浏览器中显示效果分析如下图：
2、垂直表头单元格
垂直表头单元格的<th>标签都放在每行的第1列位置，演示代码如下：
<table border="1"> <caption>表格的标题</caption> <tr><th>第1个表头单元格</th><td>第1行,第2列</td></tr> <tr><th>第2个表头单元格</th><td>第2行,第2列</td></tr> <tr><th>第3个表头单元格</th><td>第3行,第2列</td></tr> <tr><th>第4个表头单元格</th><td>第4行,第2列</td></tr> </table>
以上垂直表头单元格的表格代码在浏览器中显示效果分析如下图：
<th>表头跨行或跨列
如果需要将表头单元格横跨多个行或列，请使用colspan和rowspan属性！
1、跨列使用colspan属性
<th>表头横跨多少列，colspan属性值就设置多少。
比如，下列演示代码中，第2个表头单元格横跨两列：
<table border="1"> <tr><th>第1个表头单元格</th><th colspan="2">第2个表头单元格</th></tr> <tr><td>第2行,第1列</td><td>第2行,第2列</td><td>第2行,第3列</td></tr> <tr><td>第3行,第1列</td><td>第3行,第2列</td><td>第3行,第3列</td></tr> <tr><td>第4行,第1列</td><td>第4行,第2列</td><td>第4行,第3列</td></tr> </table>
以上表头横跨两列单元格的表格代码在浏览器中显示效果分析如下图：
2、跨行使用rowspan属性
<th>表头竖跨多少行，rowspan属性值就设置多少。
比如，下列演示代码中，第2个表头单元格竖跨两行：
<table border="1"> <tr><th>第1个表头单元格</th><td>第1行,第2列</td></tr> <tr><th rowspan="2">第2个表头单元格</th><td>第2行,第2列</td></tr> <tr><td>第3行,第2列</td></tr> <tr><th>第3个表头单元格</th><td>第4行,第2列</td></tr> </table>
以上表头竖跨两行单元格的表格代码在浏览器中显示效果分析如下图：
<th>标签的属性
HTML 5 中不再支持 HTML 4.01 中的某些属性。
| 属性 | 值 | 描述 |
|---|---|---|
| rowspan | number | 规定表头单元格可横跨的行数。 |
| colspan | number | 规定表头单元格可横跨的列数。 |
| headers | header_id | 规定与表头单元格相关联的一个或多个表头单元格。 |
| scope | col colgroup row rowgroup | 规定表头单元格是否是行、列、行组或列组的头部。 |
| abbr | text | HTML5 不支持。 规定表头单元格中内容的缩写版本。 |
| align | left right center justify char | HTML5 不支持。 规定表头单元格内容的水平对齐方式。 |
| axis | category_name | HTML5 不支持。 对表头单元格进行分类。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。 |
| char | character | HTML5 不支持。 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | HTML5 不支持。 规定对齐字符的偏移量。 |
| height | pixels % | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。 |
| nowrap | nowrap | HTML5 不支持。HTML 4.01 已废弃 。 规定表头单元格中的内容是否折行。 |
| valign | top middle bottom baseline | HTML5 不支持。 规定表头单元格内容的垂直排列方式。 |
| width | pixels % | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。 |
在HTML 4.01中，<th>标签中的 “bgcolor”、”height”、”width” 以及 “nowrap”等 属性是不被赞成使用的。