<thead><tbody><tfoot> 定义和用法
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
他们三个搭配使用结合起来使用。
tbody:<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容
tfoot :<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格的表注内容
tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
请注意,在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
浏览器支持
<thead> 标签仅得到所有主流浏览器的部分支持。
HTML 与 XHTML 之间的差异
NONE
提示和注释:
注释:<thead> 内部必须拥有 <tr> 标签!
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器,
在XML 中一个例子用法:
<html>
<body>
<xml id="cdcat" src="/example/xmle/cd_catalog.xml"></xml>
<table border="1" datasrc="#cdcat">
<thead>
<tr><th>Artist</th><th>Title</th></tr>
</thead>
<tfoot>
<tr><th colspan="2">This is my CD collection</th></tr>
</tfoot>
<tbody>
<tr>
<td><span datafld="artist"></span></td>
<td><span datafld="title"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性 | 值 | 描述 | DTD |
---|---|---|---|
align |
| 定义 thead 元素中内容的对齐方式。 | STF |
char | character | 规定根据哪个字符来进行文本对齐。 | STF |
charoff | number | 规定第一个对齐字符的偏移量。 | STF |
valign |
| 规定 thead 元素中内容的垂直对齐方式。 | STF |
HTML 标签拥有属性。每个标签的特殊属性均被列于每个标签描述之下。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外):
核心属性 (Core Attributes)
以下标签不提供下面的属性:base、head、html、meta、param、script、style 以及 title 元素。
属性 | 值 | 描述 |
---|---|---|
class | class_rule or style_rule | 元素的类(class) |
id | id_name | 元素的某个特定id。 |
style | 样式定义 | 内联样式定义。 |
title | 提示文本 | 显示于提示工具中的文本。 |
语言属性 (Language Attributes)
以下标签不提供下面的属性:base、br、frame、frameset、hr、iframe、param 以及 script 元素。
属性 | 值 | 描述 |
---|---|---|
dir | ltr | rtl | 设置文本的方向。 |
lang | 语言代码 | 设置语言代码。 |
键盘属性 (Keyboard Attributes)
属性 | 值 | 描述 |
---|---|---|
accesskey | 字符 | 设置访问某元素的键盘快捷键。 |
tabindex | 数 | 设置某元素的Tab次序 |
事件属性
HTML 事件属性
HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个 JavaScript 命令或函数。
事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用,并用引号引起来。当事件发生时,浏览器会执行这些代码。例如,当您把鼠标移动到一个超链接时,会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作:
<a href="/index.html"
onmouseover="alert('Welcome');return false"
></a>如需学习更多有关事件编程方面的知识,请访问 W3School 提供的 JavaScript 教程 和 DHTML 教程。
下面的表格提供了标准的事件属性,可以把它们插入 HTML/XHTML 元素中,以定义事件行为。
窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
属性 值 描述 onload 脚本 当文档被载入时执行脚本 onunload 脚本 当文档被卸下时执行脚本 表单元素事件 (Form Element Events)
仅在表单元素中有效。
属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本 图像事件 (Image Events)
该属性可用于 img 元素:
属性 值 描述 onabort 脚本 当图像加载中断时执行脚本 键盘事件 (Keyboard Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性 值 描述 onkeydown 脚本 当键盘被按下时执行脚本 onkeypress 脚本 当键盘被按下后又松开时执行脚本 onkeyup 脚本 当键盘被松开时执行脚本 鼠标事件 (Keyboard Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性 值 描述 onclick 脚本 当鼠标被单击时执行脚本 ondblclick 脚本 当鼠标被双击时执行脚本 onmousedown 脚本 当鼠标按钮被按下时执行脚本 onmousemove 脚本 当鼠标指针移动时执行脚本 onmouseout 脚本 当鼠标指针移出某元素时执行脚本 onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本 onmouseup 脚本 当鼠标按钮被松开时执行脚本