html基础表格结构标签和合并单元格_html表格结构标签-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43972159/article/details/118502502

本文介绍了HTML中的thead、tbody标签使用，展示了如何合并单元格，包括跨行和跨列操作，并提供了示例代码。适合理解表格结构和前端开发者学习.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格结构标签

thead标签: 用于定义表格的头部,thead内部必须拥有tr标签,一般是位于第一行
tbody标签: 用于定义表格的主体,主要用于存放数据本体
以上的标签都是放在table标签中的,有这两个标签的好处是,语义会更加的清晰,更容易理解

合并单元格

特殊情况下,可以把多个单元格合并为一个单元格

合并单元格的方式
目标单元格
合并单元格的步骤

合并单元格的方式

实现效果:
在这里插入图片描述

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

目标单元格

跨行: 最上侧的单元格为目标单元格,写合并的代码
跨列: 最左侧单元格为目标单元格,写合并的代码

合并单元格三步曲

先确定是跨行还是跨列合并
找到目标单元格,写上合并的方式=合并单元格的数量
删除多余的单元格

示例代码

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <thead>
            <tr>
                <th>列</th><th colspan="2">列</th>
            </tr>
        </thead>
        <tbody>
            <tr><td></td><td></td><td></td></tr>
            <tr><td rowspan="2"></td><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>