HTML <th> 标签

HTML <th> 元素定义表格内的表头单元格。


实例

普通的 HTML 表格,包含两行两列:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6. border: 1px solid black;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>th 元素内容不换行</h1>
  12. <table>
  13. <tr>
  14. <th>月份</th>
  15. <th style="white-space:nowrap">我为了买新车而攒钱(希望我将来能买一辆)</th>
  16. </tr>
  17. <tr>
  18. <td>1月</td>
  19. <td>$100</td>
  20. </tr>
  21. <tr>
  22. <td>2月</td>
  23. <td>$80</td>
  24. </tr>
  25. </table>
  26. <p>Table 不换行:</p>
  27. <table>
  28. <tr>
  29. <th>月份</th>
  30. <th>我为了买新车而攒钱(希望我将来能买一辆)</th>
  31. </tr>
  32. <tr>
  33. <td>1月</td>
  34. <td>$100</td>
  35. </tr>
  36. <tr>
  37. <td>2月</td>
  38. <td>$80</td>
  39. </tr>
  40. </table>
  41. <p><b>备注:</b> 您可能必须缩小浏览器窗口才能看到效果。</p>
  42. </body>
  43. </html>
  1. <html>
  2. <body>
  3. <table border="1">
  4. <tr>
  5. <th>公司</th>
  6. <th>地址</th>
  7. </tr>
  8. <tr>
  9. <td>Apple, Inc.</td>
  10. <td>加利福尼亚州的库比蒂诺</td>
  11. </tr>
  12. </table>
  13. </body>
  14. </html>

定义和用法

定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:

表头单元格 - 包含表头信息(由 th 元素创建)

标准单元格 - 包含数据(由 td 元素创建)

th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。


浏览器支持

元素
<th>YesYesYesYesYes

所有浏览器都支持 <th> 标签。


提示和注释

提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性。


HTML 与 XHTML 之间的差异

在 HTML 4.01 中,th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性是不建议使用的。

在 XHTML 1.0 Strict DTD 中,不支持 th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性。


可选的属性

属性描述
abbrtext规定单元格中内容的缩写版本。
align
  • left
  • right
  • center
  • justify
  • char
规定单元格内容的水平对齐方式。
axiscategory_name对单元格进行分类。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不推荐使用。请使用样式替代它。

规定表格单元格的背景颜色。

charcharacter规定根据哪个字符来进行内容的对齐。
charoffnumber规定对齐字符的偏移量。
colspannumber设置单元格可横跨的列数。
headersidrefs由空格分隔的表头单元格 ID 列表,为数据单元格提供表头信息。
height
  • pixels
  • %

不推荐使用。请使用样式替代它。

规定表格单元格的高度。

nowrapnowrap

不推荐使用。请使用样式取而代之。

规定单元格中的内容是否换行。

rowspannumber规定单元格可横跨的行数。
scope
  • col
  • colgroup
  • row
  • rowgroup
定义将表头数据与单元数据相关联的方法。
valign
  • top
  • middle
  • bottom
  • baseline
规定单元格内容的垂直排列方式。
width
  • pixels
  • %

不推荐使用。请使用样式取而代之。

规定表格单元格的宽度。


全局属性

<th> 标签支持 HTML 中的 全局属性


事件属性

<th> 标签支持 HTML 中的 事件属性


相关页面

HTML DOM 参考手册:TableHeader 对象


更多实例

th元素内容垂直对齐

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6. border: 1px solid black;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>th 中的内容垂直对齐方式</h1>
  12. <table style="width:50%;">
  13. <tr style="height:100px">
  14. <th style="vertical-align:bottom">月份</th>
  15. <th style="vertical-align:bottom">结余</th>
  16. </tr>
  17. <tr>
  18. <td>1月</td>
  19. <td>$100</td>
  20. </tr>
  21. </table>
  22. </body>
  23. </html>

th标签默认样式

  1. th {
  2. display: table-cell;
  3. vertical-align: inherit;
  4. font-weight: bold;
  5. text-align: center;
  6. }