问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

html元素tbody标签的使用方法及作用

更新时间:2021-06-10 11:22 作者:刘代码点击:

html元素tbody标签的使用方法及作用详解如下:

<tbody>标签的定义

<tbody>标签用于组合布局HTML表格的主体内容;

<tbody>标签应该与定义表格表头的<thead>和定义表格主体的<tfoot>一起使用;

<tbody>标签内部必须包含一个或者多个 <tr> 标签;

<tbody>标签和<thead>、<tfoot>标签在默认情况下是不会影响表格的布局;

<tbody> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后.

<tbody>标签的作用

<thead>、<tbody>和<tfoot>分别用来布局组合表格的表头、主体、页脚部分。

使用这三个标签一起组合布局html表格,有以下几个作用:

1、如果表格比较长,在浏览器中滚动表格页面时,每个页面除了显示表格主体外,也会显示表格的表头和页脚。

2、当表格太长,需要被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

浏览器支持情况

<tbody>标签已被所有主流浏览器都支持。

<tbody>标签的用法

<tfoot>应该结合<tbody>、<thead>一起使用,演示代码如下:

Markup
<table  border="1">
<caption>表格的标题<caption>
<thead style="color:green;">
<tr>
<th>表头1</td>
<th>表头2</td>
<th>表头3</td>
</tr>
</thead>
<tbody style="color:blue;">
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
<td>第2行3列</td>
</tr>
</tbody>
<tfoot style="color:red;">
<tr>
<td>第3行1列</td>
<td>第3行2列</td>
<td>第3行3列</td>
</tr>
</tfoot>
</table>

以上演示代码在浏览器中显示效果如下:

2020-04-23_171809.png

<tbody>标签的属性

在HTML5中,不再支持 HTML 4.01 中 的任何属性。

在html5中,已经不再支持<tfoot>标签中的align、char、charoff、valign、width属性。

但您可以使用 CSS样式来为<tfoot>元素定义样式,从而改变表格的外观效果。
更多相关阅读《tbody标签的妙用 加速表格内容显示

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容