• 技术文章 >web前端 >html教程

    html怎么设置表格边框

    藏色散人藏色散人2021-04-27 14:46:35原创29664

    html设置表格边框的方法:首先创建一个HTML示例文件;然后通过table定义一张表格;最后通过添加css代码为“tr td,th{border:1px solid red;}”来设置表格边框即可。

    大前端成长进阶课程:进入学习

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    准备一段表格的html代码,通过该段代码,显示浏览器对table标签的默认渲染。代码如下:

    <html>
    <head>
    <title></title>
    </head>
    <style>
    </style>
    <body>
    <table class="mt">
        <tr>
             <th>col_1</th>
             <th>col_2</th>
             <th>col_3</th>
        </tr>
        <tr>
             <td>value_1</td>
             <td>value_2</td>
            <td>value_3</td>
       </tr>
    </table>
    </body>
    </html>

    bbb66c9a9e6bcd39966b210ed8565b4.png

    为table设置内边框,可以看出table标签的默认样式是没有边框的。现在我们为table添加一个边框,只需要在style标签添加如下代码:

    <style>
    tr td,th{
    border:1px solid red;
    }
    </style>

    5b35f2533fb061c8201267cb273950c.png

    8d4b4247a891e5a0a4833939c2b9ffd.png

    取消单元格间的空白,上一步骤中, 虽然设置行内的边框,但是单元格之间的空白往往不是我们想要的,所以我们可以通过下面的代码设置:

    <style>
    tr td,th{
    border:1px solid red;
    }
    /*取消table标签中的单元格空白*/
    .mt{
     border-collapse:collapse;
    }
    </style>

    92d9e8318081e3a7602d16b65aaeb77.png

    3ef205a739a696fe55a998d9e4c1575.png

    为表格设置外边框,代码如下:

    <style>
    .mt{
     border-collapse:collapse;
     border:1px solid black; /*设置表格的外边框*/
    }
    </style>

    2b39d9ed6604df587d033c98111d7d0.png

    设置行边框,相对对于单元格边框设置,行边框的设置更加常见。我们只需要使用如下代码

    <style>
     
     
    .mt{
     border-collapse:collapse;
     border:1px solid black;
    }
    /*设置行边框*/
    .mt tr{
    border-bottom:1px solid black;
    }
    </style>

    0b17e9462201f363552bc8bed373127.png

    103a27232a1a365658f8152be190fae.png

    【推荐学习:HTML视频教程

    以上就是html怎么设置表格边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html
    上一篇:html如何去掉超链接的下划线 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• html如何清除浮动• 如何将JSON转换为HTML格式并显示• html怎样设置按钮大小• html怎么下载
    1/1

    PHP中文网