table表格的两个实现⽅法（怎样消除内部边框的间距）在⽤table写表格的时候我们初学者容易写成这样:
⽽要写成下⾯这样:
⽅法⼀:
代码实例如下:
<title>⽆标题⽂档</title>
<style type="text/css">
table {
width:500px;
height: 200px;
border: 1px solid red;
border-collapse: collapse;
}
table tr td{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
table设置内边框
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
可以显⽰这个效果是这个效果的功劳 border-collapse: collapse；下⾯说⼀下这个属性有什么作⽤:
为表格设置合并边框模型：
⽅法⼆:
代码实例如下:
<title>⽆标题⽂档</title>
<style type="text/css">
table {
width:500px;
height: 200px;
}
</style>
</head>
<body>
<table >  <tr >  <td></td>
<td></td>
</tr>
<tr >  <td></td>
<td></td>
</tr>
<tr >  <td></td>
<td></td>
</tr>
</table>
</body>
</html>
⽅法三:
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<style type="text/css">
table {
width:500px;
height: 200px;
}
</style>
</head>
<body>
<table bgcolor="red" >
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
⽅法四:
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<style type="text/css">
table {
width:500px;
height: 200px;
background-color:red;
}
table tr{
background-color:white;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
⽅法⼆三四的区别于联系：
简单说⼀下:
是内联样式和css中写法上的区别，在html中可以通过 给标签添加css样式， 也可以写在css中控制标签

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