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="javascrpit:;">删除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href="javascrpit:;">删除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href="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="javascrpit:;">删除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href="javascrpit:;">删除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href="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="javascrpit:;">删除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高数</td> <td>86</td> <td> <a href="javascrpit:;">删除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高数</td> <td>65</td> <td><a href="javascript">删除</a></td> </tr> </tbody> </table> </body>
效果图:
【表格属性小结】
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或0 |
规定表格是否有边框默认无边框 border="1"表示有边框，意思给表格每一格加上1像素边框 border="0"表示无边框 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2px |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白区域，默认1px |
| width | 像素值或百分比 | 规定表格的宽度 |
