CSS3-案例-表格边框合并

Q _Q

于 2023-06-25 22:10:57 发布

阅读量222

点赞数

分类专栏： CSS3 文章标签： css3 前端 css html

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131345656

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

该代码示例展示了如何使用HTML和CSS创建一个3x3的表格，并通过CSS的`border-collapse:collapse;`属性实现表格边框的合并，达到简洁的视觉效果。每个单元格`td`都设置了边框，以便在合并后呈现清晰的格线。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 300px;
            height: 300px;
            /* 表格专属属性 bcl 可以让表格的边框合并 */
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果图：