HTML 中的 THead 标签-html教程-PHP中文网

HTML 中的 THead 标签示例

示例#4

HTML 中 THead 标签的属性

结论

首页

web前端

html教程

HTML 中的 THead 标签

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

元素或标签与

一起使用在 hand 中。标签和标签，分别定义表头、表尾和表体。 <头部>元素定义 HTML 表格的标题。要定义创建表的列标题的行或行集，我们使用元素。换句话说，此元素将 HTML 表中的标头内容分组。它包含整行或几行并将其分类为表头。在本主题中，我们将学习 HTML 中的 THhead 标签。

表头由一行或多行组成，其中包含有关列或表主体数据的信息。

如何使用 HTML 中的元素？

元素指定 HTML 表的标头部分。这个<标题>因此确保了作为表元素

的直接子元素的位置。在使用任何、或;元素。 <头部>元素可以出现在任何之后。元素（如果有）和中的数据。元素。

语法

<thead>
<tr>
</tr>
</thead>

登录后复制

当然，如上所示，就像任何其他 HTML 元素一样，

元素也可以成对使用，打开标签，有一个伙伴、一个结束标签、 .

HTML 中的 THead 标签示例

考虑以下示例：

示例#1

代码：

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

登录后复制

输出：

HTML 中的 THead 标签

请注意，如果表格标题需要两行，则两个

都可以。元素数据可以添加到一个元素中。元素。尽量不要添加两个一张表的元素部分。请观察下面的一个这样的示例，标题部分下有两行：

示例#2

代码：

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

登录后复制

输出：

HTML 中的 THead 标签

示例 #3

代码：

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

登录后复制

输出：

HTML 中的 THead 标签

请注意，尽管上面的代码生成相同的输出并使用单独的

;某些浏览器确实可以处理两个标头的元素。然而，它仍然是一个语义错误，不应在正确的编程中使用，并且 HTML 验证服务也会将其作为危险信号提出。

示例#4

让我们看下面另一个例子。在下面的示例中，我们创建了一个表，表体由四行数据组成。标题由一行数据组成，使用 CSS 设置为背景颜色。 <头部> , 或

不影响 HTML 表格的默认外观；因此，一点 CSS 的帮助就足够了。

代码：

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

登录后复制

输出：

HTML 中的 THead 标签