HTML中实现表格的合并列（colspan）和合并行（rowspan）

固网

于 2024-03-29 14:25:56 发布

阅读量802

点赞数 10

文章标签： html 前端 vscode 学习

本文链接：https://blog.csdn.net/weixin_54018753/article/details/137143662

版权

HTML中实现表格的合并列（colspan）和合并行（rowspan）

首先是程序的代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格</title>
    </head>
    <body>
        <table border="2" height="150px" width="300px" bgcolor="yellow">
            <tbody align="center" valign="center">
                <p>单元跨两列</p>
                <tr>
                    <th>姓名</th>
                    <th colspan="2">电话</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>123456</td>
                    <td>891011</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>123456</td>
                    <td>891011</td>
                </tr>
            </tbody>
        </table>

        <p>单元跨两行</p>
        <table border="2" bgcolor="blue" width="300px" height="150px">
            <tr>
                <th>姓名</th>
                <td>张三</td>
                <td>李四</td>
            </tr>
            <tr>
                <th rowspan="2">电话</th>
                <td>123456</td>
                <td>123456</td>
            </tr>
            <tr>
                <td>891011</td>
                <td>891011</td>
            </tr>
        </table>
    </body>
</html>

程序运行结果：
在这里插入图片描述

总结

本次程序用到了如下标签：
colspan:合并列
rowspan:合并行
bgcolor:设置表格的背景颜色，用在table标签里，具体看我的程序
border:设置表格的边框的宽度
width:宽
height:高
td:列
tr:行
tbody:修改表格的单元格属性，我在程序里使用它设置了表格里文本的居中
align:设置内容的水平对齐方式，常用的是center、left、right
valign:设置内容的垂直对齐方式，常用的是center、left、right
th:设置单元格标题

固网

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML中实现表格的合并列（colspan）和合并行（rowspan）

colspan:合并列rowspan:合并行bgcolor:设置表格的背景颜色，用在table标签里，具体看我的程序border:设置表格的边框的宽度width:宽height:高td:列tr:行tbody:修改表格的单元格属性，我在程序里使用它设置了表格里文本的居中align:设置内容的水平对齐方式，常用的是center、left、rightvalign:设置内容的垂直对齐方式，常用的是center、left、rightth:设置单元格标题。
复制链接

扫一扫