HTML table 表格边框效果实现思路详解！

2021-08-07 17:09:54 浏览数 (5)

对于编程来说除了编程实力之外还要有自己的设计和实现的思路这样才可以出色的完成一个产品，那么今天我们就来学习有关于“HTML table 表格边框效果实现思路详解！”这方面的相关内容吧！

一、总体思路：

　　1、表格无边框，背景颜色设置一种颜色（#DCDFE6），这样表格的边框的颜色就是表格的背景颜色；

　　2、单元格间距为1px，背景颜色设置为白色（#FFFFFF）

 // CSS
    table { background:#DCDFE6; width: 100%; }
    table td { background:#FFFFF; }
    // HTML
    <table border="0" cellspacing="1" cellpadding="0">
         <tr>
           <td colspan="3"><el-checkbox>仪表面板</el-checkbox></td>
         </tr>
         <tr>
            <td rowspan="2"><el-checkbox>渠道管理</el-checkbox></td>
            <td><el-checkbox>渠道列表</el-checkbox></td>
           <td>
              <el-checkbox>新增</el-checkbox>
              <el-checkbox>编辑</el-checkbox>
              <el-checkbox>删除</el-checkbox>
           </td>
        </tr>
   </table>

二、效果图

总结

我们上面这些内容就是对于“HTML table 表格边框效果实现思路详解！”这方面的全部内容分享！希望小编的辛苦对大家有所帮助，当然了如果大家有比较喜欢html5的话，小编推荐大家可以在W3Cschool这个网站进行学习，里面拥有很多基础和全面的学习资料！


HTML5

0 人点赞