HTML中正确设置表格table边框border的三种办法 |
您所在的位置:网站首页 › 可视表格边框怎么设置 › HTML中正确设置表格table边框border的三种办法 |
如何实现单线边框 一、导入 table表格添加边框后,它的默认效果如下: table { width: 400px; } table, table td, table th { border: 1px solid #000000; }
二、解决方案(3种方法) 【方法一】 核心思想: 1、设置BORDER=0 ; 2、再通过CSS,给Table加上1px的border-top,border-left; 3、然后再设置所有的td的border-right,border-bottom; css代码: table { border-right: 1px solid #000000; border-bottom: 1px solid #000000; text-align: center; } table th { border-left: 1px solid #000000; border-top: 1px solid #000000; } table td { border-left: 1px solid #000000; border-top: 1px solid #000000; }html代码: 姓名 科目 成绩 操作 小王 高数 98 删除 小深 高数 86 删除 小濛 高数 65 删除效果图:
【方法二】 核心思想: 1、给table设置css为border-collapse: collapse 2、设置所有td及th的css为border: 1px solid #000000; css代码: table { width: 400px; margin: 0 auto; border: 1px solid #000000; border-collapse: collapse; } th, td { border: 1px solid #000000; text-align: center; }html代码: 姓名 科目 成绩 操作 小王 高数 98 删除 小深 高数 86 删除 小濛 高数 65 删除效果图: 【方法三】 核心思想: 1、将table的属性设置为:BORDER=0 、cellspacing=1 ; 2、设置table的背景色为即你要设置的table的边框颜色; 3、设置所有td背景色为#ffffff白色; css代码 table { background-color: black; text-align: center; } table th { background-color: #ffffff; } table td { background-color: #ffffff; }html代码: 姓名 科目 成绩 操作 小王 高数 98 删除 小深 高数 86 删除 小濛 高数 65 删除效果图:
【表格属性小结】 属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式 border 1或0 规定表格是否有边框默认无边框 border="1"表示有边框,意思给表格每一格加上1像素边框 border="0"表示无边框 cellspacing 像素值 规定单元格之间的空白,默认2px cellpadding 像素值 规定单元边沿与其内容之间的空白区域,默认1px width 像素值或百分比 规定表格的宽度 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |