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

前言

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

---

一、表格的基本标签

场景:

在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表

代码

    <!-- 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>

基本标签:

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意点:

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

小结

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

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

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

• table > tr > td

二、表格相关属性

场景:

设置表格基本展示效果

代码

   <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>

常见相关属性:

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点:

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

小结

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

• border属性

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

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

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

场景:

在表格中表示整体大标题和一列小标题

代码

<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>

其他标签:

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部剧中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点:

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

小结

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

• 表格整体大标题:caption标签 • 书写在table标签内部

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

• 表头单元格:th标签 • 书写在tr标签内部(用于替换td标签)

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

场景:

让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰

结构标签:

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点:

• 表格结构标签内部用于包裹tr标签 • 表格的结构标签可以省略

小结

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

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

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

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

五、合并单元格

合并单元格-思路

场景:

将水平或垂直多个单元格合并成一个单元格

合并单元格-代码实现

合并单元格步骤:

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名	属性值	说明
rowspan	合并单元的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元的个数	跨列合并，将多列的单元格水平合并

注意点:

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

小结

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

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan) • rowspan:跨行合并→垂直方向合并 • colspan:跨列合并→水平方向合并

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

• 不能

总结

表格基本标签:table > tr > td 表格标题和表头单元格标签:table > caption + tr > th 表格结构标签:table > thead > tr > td 表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

合并单元格步骤

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名	属性值	说明
rowspan	合并单元的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元的个数	跨列合并，将多列的单元格水平合并

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