html表格边框线怎么设置所有框线_html表格的边框线怎么设置

2024年 8月 29日下午5:36 • 激活谷笔记

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代码：　　<style> 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; } </style> 　　html代码：　　<body> <table align=”center” width=”400″ cellspacing=”0″> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <!– 第1行 –> <tr> <td>小王</td> <td>高数</td> <td>98</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a> </td> </tr> <!– 第2行 –> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a></td> </tr> <!– 第2行 –> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href=”https://www.cnblogs.com/Abbynameswld/p/javascript”>删除</a></td> </tr> </tbody> </table> </body> 　　效果图：　　
　　　　　　【方法二】　　核心思想：　　1、给table设置css为border-collapse: collapse 　　2、设置所有td及th的css为border: 1px solid #000000; 　　css代码：　　<style> table { width: 400px; margin: 0 auto; border: 1px solid #000000; border-collapse: collapse; } th, td { border: 1px solid #000000; text-align: center; } </style> 　　html代码：　　<body> <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <!– 第1行 –> <tr> <td>小王</td> <td>高数</td> <td>98</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a> </td> </tr> <!– 第2行 –> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a></td> </tr> <!– 第2行 –> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href=”https://www.cnblogs.com/Abbynameswld/p/javascript”>删除</a></td> </tr> </tbody> </table> </body> 　　效果图: 　　
　　【方法三】　　核心思想：　　1、将table的属性设置为：BORDER=0 、cellspacing=1 ；　　2、设置table的背景色为即你要设置的table的边框颜色；　　3、设置所有td背景色为#ffffff白色；　　css代码　　<style> table { background-color: black; text-align: center; } table th { background-color: #ffffff; } table td { background-color: #ffffff; } </style> 　　html代码：　　<body> <table width=”400″ cellspacing=”1″ border=”0″> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <!– 第1行 –> <tr> <td>小王</td> <td>高数</td> <td>98</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a> </td> </tr> <!– 第2行 –> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href=”https://www.cnblogs.com/Abbynameswld/p/javascrpit:;”>删除</a></td> </tr> <!– 第2行 –> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href=”https://www.cnblogs.com/Abbynameswld/p/javascript”>删除</a></td> </tr> </tbody> </table> </body> 　　效果图: 　　
　　【表格属性小结】　　属性名属性值描述 align left、center、right 规定表格相对周围素的对齐方式 border 1或0 　　规定表格是否有边框默认无边框　　border=”1″表示有边框，意思给表格每一格加上1像素边框　　border=”0″表示无边框 cellspacing 像素值规定单格之间的空白，默认2px cellpadding 像素值规定单边沿与其内容之间的空白区域，默认1px width 像素值或百分比规定表格的宽度

html表格边框线怎么设置所有框线_html表格的边框线怎么设置

相关推荐