HTML 简单的&lt;thead&gt; 标签

例

带有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

浏览器支持

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

标签定义及使用说明

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

<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

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

提示和注释

注释：<thead> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不再支持 HTML 4.01 中 <thead> 标签的任何属性。

属性

属性	值	描述
align	rightleftcenterjustifychar	HTML5 不支持。定义 <thead> 元素中内容的对齐方式。
char	character	HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。
charoff	number	HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。
valign	topmiddlebottombaseline	HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead> 标签支持 HTML 的全局属性。

事件属性

<thead> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

续一周没怎么更新了，今天我们继续HTML的学习，表格标签。表格是实际开发中常用的一种标签类型，会说到表格标签的主要作用和基本语法。

主要作用: 表格主要用于显示、展示数据，因为它可以让数据展示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格非常重要。一个清爽简约的表格可以把复杂的数据表现的很简单。表格不是用来布局页面的，而是用来展示数据的。

表格的基本语法: <table><tr><td></td></tr></table>

<table></table>用来定义表格标签

<tr></tr>用于定义表格中的行，嵌套在<table>标签中使用

<td></td>用于定义表格中的单元格，嵌套在<tr>标签中使用，字母td指表格数据(table data),即数据单元格的内容。

我们来展示一个例子，比如数据库中有三个字段，分别为姓名性别和年龄，如果想用前端将这三个字段的数据展示出来，应该怎么操作呢？

先看效果:

然后我们看下代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

</table>

</body>

</html>

这次开始使用vs code来编辑代码了，感觉比sublime line高级一些，但是相对的也麻烦点。可以看到，在前端页面展示了姓名、性别和年龄。然后我们添加一行数据，看效果:

民族英雄黄飞鸿如果还活着，应该也是一位非常高寿的宗师了。多加几个数据

让我们看看代码有什么不同

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

>

</table>

</body>

</html>

可以看到，就是将之前的数据进行了复制而已。

接着我们说下表头单元格标签，一般表头单元格位于表头的第一行或第一列，表头单元格里面的文本内容，加粗居中表示。

<th>标签表示HTML表格的表头部分，table head的缩写

我们先来看下效果:

再看下对应的代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

>

>

</table>

</body>

</html>

就是将表格表头那一行的<td>都换成了<th>，可以看到表头每个字段都已经居中并且加粗了。

最后我们说下表格的属性，其实表格标签属性这部分用的不多，一般都是用css样式来设置。例如表格的边框、大小等。我们需要关注的表格属性目的，有2点:

记住英文显示名称，之后使用css样式会用到
直观感受表格的外观状态

align 属性值: left right center 对应表格相对周围元素的对齐方式

border 属性值 1或"" (空) 规定表格单元是否有边框，默认为空，表示没有边框

cellpadding 像素值规定单元边沿与其内容之间的空白，默认1像素

cellspacing 像素值规定单元格之间的空白，默认1像素

width 像素值或百分比规定表格的宽度

我们来看下效果:

来看下代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

>

>

</table>

</body>

</html>

记住，属性都是在table处添加和修改的，因为我们是对整个table的设置值。

好的，今天就先到这里了，大家周末愉快

一下html中文件标签和文本标签的使用

目的是学会使用，所以借助工具可以省好多时间

1.文件标签：构成html最基本的标签

html:html文档的根标签

head：头标签。用于引入html文档的一些属性。引入外部的一些资源

title：标题标签

body：体标签

<!DOCTYPE html>:html5中定义该文档是html

2.文本标签：和文本有关的标签

注释:<!-- 注释内容 –->

<h1> 到<h6>:标题标签自带换行的效果

<p>：表示段落的标签

<br>：换行标签<br/>和<br>的写法都不会报错

<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。

<b>：字体加粗

<i>：斜体

<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）

<center>:文本居然标签

这里讲下网页下面的版权标签是如何写出来的。

3.图片标签：用来展示图片的（图片也是一个自闭合标签）

属性:src:用来指定图片的位置

什么都不写默认就是./的形式

../表示上一级目录

4.列表标签：

有序列表:ol,li(li表示的是列表的每一项)

无序列表:ul,li

5.链接标签：

a:定义一个超链接

属性：

href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)

target：（是目标的意思）指定打开资源的方式

_self:在当前页面打开

_blank:在空白页面打开

6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。

table:定义表格

width:表格的宽度

border:边框

cellpadding:单元格内容左对齐（定义内容和单元格的距离）

cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)

bgcolor:背景色

align:表格的对齐样式

tr:定义行

bgcolor:背景色

align:表格的对齐样式(是用来修改文本的对齐方式的)

td:定义单元格

colspan:合并列

rowspan:合并行

th:定义表头单元格

<caption>:表格标题

<thread>:表示表格的头部分

<tbody>:表示表格的体部分

<tfoot>:表示表格的脚部分

7.块标签：div和span是结合css使用的

span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)

div:是会换行的。每一个div占满一整行。块级别的标签

8.语义化标签：html5中为了提高程序的可读性，提高了一些标签

在线咨询

上一篇：javascript 获取网页各种宽度
下一篇：前端移动开发基础HTML5丶CSS3+零基础Web前端开发工程师高端培训

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 简单的&amp;lt;thead&amp;gt; 标签

您的项目需求

HTML 简单的<thead> 标签