Web前端，HTML表格相关标签和属性，在网页中表格结构的显示

前言

持续总结输出中，今天讲的是HTML表格相关标签和属性，在网页中表格结构的显示

---

一、表格的基本标签

场景:

在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcuXSXC0-1656592337101)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51b3e771cdb947a8b85ea5dbd406d687~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

代码

 <!-- table 包含 tr, tr包含td -->
    <table border="1" width="600" height="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>战三</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>丽丽</td>
            <td>150分</td>
            <td>丽丽最美了</td>
        </tr>
    </table> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

基本标签:

注意点:

• 标签的嵌套关系:table > tr > td

小结

完成一个简单的表格，需要由几个标签组成?分别表示什么?

• table标签:表格整体

• tr标签:表格每行 • td标签:对于主题的每一项内容

表格基本标签的嵌套关系是什么?

• table > tr > td

二、表格相关属性

场景:

设置表格基本展示效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRmY23XX-1656592337102)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99db656274534ba8a03c0b0e217f3396~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

代码

 <table border="1" width="600" height="100">
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐，你考的真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

常见相关属性:

注意点:

• 实际开发时针对于样式效果推荐用CSS设置

小结

给表格添加边框，可以使用什么属性完成?

• border属性

设置表格整体的宽高，可以使用什么属性完成?

• width属性:表格整体的宽度

• height属性:表格整体的高度

三、表格标题和表头单元格标签

场景:

在表格中表示整体大标题和一列小标题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PraWFzDS-1656592337102)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac43875b87f541b19370e8da1696d9c9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

代码

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <!-- <td></td> -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒, 第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒, 第二名</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>真棒, 相亲成功</td>
        </tr>
    </table> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

其他标签:

注意点:

• caption标签书写在table标签内部

• th标签书写在tr标签内部(用于替换td标签)

小结

表示表格整体大标题，使用什么标签完成?书写在什么位置?

• 表格整体大标题:caption标签

• 书写在table标签内部

在表格第一行设置一列的小标题，使用什么标签完成?书写在什么位置?

• 表头单元格:th标签

• 书写在tr标签内部(用于替换td标签)

四、表格的结构标签(了解)

场景:

让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xd5i0pvb-1656592337103)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42f70bcccd094616aac78b4de6c99038~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

结构标签:

注意点:

• 表格结构标签内部用于包裹tr标签

• 表格的结构标签可以省略

小结

表格的结构标签分别有哪些?表示什么含义?

• thead:表格头部

• tbody:表格主体 • tfoot:表格底部

表格结构标签书写在什么位置?

• 表格结构标签写在table标签内部

• 表格标签内部用于包裹tr标签

五、合并单元格

合并单元格-思路

场景:

将水平或垂直多个单元格合并成一个单元格 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iNgJc8fD-1656592337103)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a3500528f11477687a3e663489244cb~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

合并单元格-代码实现

合并单元格步骤:

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他 3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

注意点:

• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨:thead、tbody、tfoot)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXEJnOza-1656592337103)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c7b4589c7a6495d8aeb52b28a597689~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

小结

合并单元格的步骤分哪几步?

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他 3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan) • rowspan:跨行合并→垂直方向合并 • colspan:跨列合并→水平方向合并

可以跨结构标签合并单元格吗?

• 不能

总结

表格基本标签:table > tr > td [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9Rppsno-1656592337103)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/313ee6cf19904225b5df2f20a42ca693~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)] 表格标题和表头单元格标签:table > caption + tr > th [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jFDBbAKu-1656592337104)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d0170730eb64f84aad327115ca301d7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)] 表格结构标签:table > thead > tr > td [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3S6zXLs-1656592337104)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5d8b9ed630b452a932f592d1fd4a21e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)] 表格相关属性

合并单元格步骤

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他 3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

本次的分享就到这里了！！！感谢大家支持，大家的支持是我努力的动力💪💪💪