04-表格table标签

04-表格table标签

表格作⽤：

表格是较为常⽤的⼀种标签，但不是⽤来布局，常⽤来展⽰表格式数据。

它可以让数据显⽰的⾮常的规整，可读性⾮常好。

特别是展⽰后台数据的时候，表格运⽤是否熟练就显得很重要，⼀个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以

做到，但是总没有表格来得⽅便。

表格展⽰数据1

表格展⽰数据2

1、创建表格

基本语法：

...

...

在上⾯的语法中包含基本的三对HTML标签，鱼蒸多久 分别为 table、tr、td，他们是创建表格的基本标签，缺⼀不可。

1. table ⽤于定义⼀个表格标签。

2. tr 标签 ⽤于定义表格中的⾏，必须嵌套在

3. td ⽤于定义表格中的单元格，必须嵌套在 标签中。

4. 字母 td 指表格数据（table data），即数据单元格的内容，td标签⾥可以存放任意标签。

table基本结构

总结：

表格的主要⽬的是⽤来显⽰特殊数据的

⼀个完整的表格有表格标签（table），⾏标签（tr），单元格标签（td）组成，没有列的标签

中只能嵌套 类的单元格

标签，他就像⼀个容器，可以容纳所有的元素

2、表格属性

⽰例代码1：

表格常⽤属性

表格属性⽰意图

⽰例1

3、表头单元格标签th

作⽤：

⼀般表头单元格位于表格的第⼀⾏或第⼀列，并且th标签默认⽂本加粗且

居中

语法：

只需⽤表头标签 替代相应的单元格标签 即可。

⽰例代码2：

⽰例2

4、表格标题caption

⽤法：

注意：

1. caption 元素定义表格标题，通常这个标题会被居中且显⽰于表格之上。

2. caption 标签必须紧随 table 标签之后。

3. 这个标签只存在 表格⾥⾯才有意义。

⽰例代码3：

元宵英语

⽰例3

5、 合上班迟到英语 并单元格

⽅式：

跨⾏合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

顺序：

合并的顺序我们按照 先上 后下 先左 后右 的顺序

三步曲：

先确定是跨⾏还是跨列合并

根据 先上 后下 先左 后右的原则找到斗鸡养殖 ⽬标单元格 然后写上 合并⽅式 还有 要合并的单元格数量 ⽐如 ：

删除多余的单元格 单元格

⽰例代码4：

同事评价

⽰例4

6、表格划分结构

对于⽐较复杂的表格，将表格分割成三个部分：题头、正⽂和脚注。⽽这三部分分别⽤: , , 来标注， 这样更好的分清表格结

theadtbodytfoot

构。

注意：

1. ：⽤于定义表格的头部。⽤来放标题之类的东西。 内部必须拥有 标签！

2. ：⽤于定义表格的主体。放数据本体 。

3. 放表格的脚注之类。

4. 以上标签都是放到table标签中。

7、总结表格

标签名定义说明

表格⾏标签⾏标签要再table标签内部才有意义

单元格标签单元格标签是个容器级元素，可以放任何东西

表头单元格标签它还是⼀个单元格，但是⾥⾯的⽂字会居中且加粗

表格标题标签表格的标题，跟着表格⼀起⾛，和表格居中对齐

clospan 和 rowspan合并属性⽤来横向或纵向合并单元格