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>
<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>
<td>
<a href="javascrpit:;">删除</a>
</td>
</tr>
<!-- 第2⾏ -->
<tr>
<td>⼩深</td>
html网页设计 table <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⾏ -->
<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规定表格相对周围元素的对齐⽅式
border1或0规定表格是否有边框默认⽆边框
border="1"表⽰有边框，意思给表格每⼀格加上1像素边框border="0"表⽰⽆边框
cellspacing像素值规定单元格之间的空⽩，默认2px cellpadding像素值规定单元边沿与其内容之间的空⽩区域，默认1px
width像素值或百分⽐
规定表格的宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。