<caption>我是表格的标题</caption>

<thead></thead>

<tbody></tbody>

<tfoot></ftood>

<tr>
	<th>姓名</th>
	<th>电话</th>
</tr>
<tr>
	<td rowspan="2">小明</td>
	<td>123</td>
</tr>
<tr>
	<td>321</td>
</tr>

<tr>
	<th>姓名</th>
	<th colspan="2">电话</th>
</tr>
<tr>
	<td >小明</td>
	<td>123</td>
	<td>321</td>
</tr>

格是页面中常见的一中标签，通常是用来数据展示的，而不是用来布局。

一、创建表格

• 语法

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

• 说明
• table 标签：定义一个表
• tr 标签：定义表格中的一行，必须嵌套在table标签中，有几对，表示表格有几行
• td 标签：定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）

• 注意
• 中只能嵌套
• 标签，就像一个容器，可以容纳所有的元素

表格属性

设置表格的外观样式

表头标签

• 说明
• 表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
• 示例

• 代码

<table border=1>

<tr>

<th>姓名</th>

<th>性别</th>

<th>电话</th>

</tr>

<tr>

<th>张三</th>

<td>女</td>

<td>18611110000</td>

</tr>

<tr>

<th>李四</th>

<td>男</td>

<td>18711110000</td>

</tr>

<tr>

<th>王五</th>

<td>男</td>

<td>18811110000</td>

</tr>

</table>

标题标签

表格标题标签，为表格添加标题，跟随表格的位置而移动。设置标题，我们用的是caption标签。

• 语法

<table border="1">

<caption style="text-align:left">My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

• 说明

将标题定位在表格的左|右|上|下位置。

• 示例

合并单元格（重点）

• 分类

跨行合并 rowspan=“合并单元格的个数”

跨列合并 colspan=“合并单元格的个数”

合并顺序：先上后下，先左后右

• 代码

...

```

• 合并方法：

（1）先确定是跨行还是跨列合并

（2）根据先上后下，先左后右的原则，找到目标单元格，写上合并方式（rowspan/colspan）和要合并的单元格数量

（3）删除多余的单元格

表格结构划分（了解）

表格的结构划分，使用thead、tbody 、tfoot 三种标签

• 说明
• 标签用于组合 HTML 表格的表头内容 元素应该与和元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
• 语法

<table border="1">

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>0</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>0</td>

</tr>

<tr>

<td>February</td>

<td></td>

</tr>

</tbody>

</table>

• 提示

（1） 元素内部必须包含一个或者多个 标签。

（2） thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

因为在的编辑中“<”和“>”中的内容都会被识别为代码，显示不出来内容，所以，在文本中会省略“<”和“>”，图片中的“<”和“>”不会省略。

第一阶段 01 HTML5

07表格

1 表格table（会使用）

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

2 表格的注意事项

1 tr和 /tr中只能嵌套td和/td标签

2 td和/td标签，他就像一个容器，可以容纳所有的元素

3 表格属性

使用方法：

4 表头标签

只需用表头标记th和/th替代相应的单元格标记td和/td即可。

显示效果为加粗和居中。

5 表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

1 thead和/ thead：用于定义表格的头部。

2 必须位于table和/ table标签中，一般包含网页的logo和导航等头部信息

3 tbody和/ tbody：用于定义表格的主体。

4 位于

6 浏览器审查HTML标签元素

浏览器页面按F12打开

左边显示为HTML，右边显示为CSS（后面会学到）

7 表格标题标签

表格的标题：caption

caption元素定义表格标题。

caption标签必须紧随table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

8 合并单元格

跨行合并：rowspan

跨列合并：colspan

“2”表示合并两个单元格，数值是多少就合并多少个单元格。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《08 表单和表单控件》小伙伴们不要错过哟！上述内容是作者本人的学习笔记，需要原视频学习资料可以在公众号回复关键词“前端资料”