HTML中正确设置表格table边框border的三种办法 |
您所在的位置：网站首页 › 片的笔顺是什么笔顺 › 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 像素值或百分比 规定表格的宽度 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |