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

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

更新时间:2021-04-26 10:04 作者:刘代码点击:

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

<thead>标签的定义

<thead> 标签用于组合布局HTML表格的表头内容;

<thead> 标签应该与定义表格主体的<tbody>以及定义表格页脚的<tfoot> 一起使用;

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

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

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

<thead>标签的作用

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

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

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

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

浏览器支持情况

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

<thead>标签的用法

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

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

<thead>标签的属性

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

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

但您可以使用 CSS样式来为<thead>元素定义样式,从而改变表格的外观效果。

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