table表格的两个实现方法(怎样消除内部边框的间距)

在用table写表格的时候我们初学者容易写成这样:

而要写成下面这样:

方法一: 代码实例如下:

无标题文档

	table {
		width:500px;
		height: 200px;
		border: 1px solid red;
		border-collapse: collapse;
	}
	table tr td{
		border: 1px solid red;
	}
	


	
		
			
			
		
		
			
			
		
		
			
			
		
	

可以显示这个效果是这个效果的功劳 border-collapse: collapse; 下面说一下这个属性有什么作用:

为表格设置合并边框模型：

方法二: 代码实例如下:

无标题文档


	table {
		width:500px;
		height: 200px;
	}
	


	
		
			
			
		
		
			
			
		
		
			
			
		
	

方法三: 代码实例如下:

无标题文档


	table {
		width:500px;
		height: 200px;
	}
	


	
		
			
			
		
		
			
			
		
		
			
			
		
	

方法四: 代码实例如下:

无标题文档


	table {
		width:500px;
		height: 200px;
		background-color:red;
	}
	table tr{
		background-color:white;
	}


	




	
		
			
			
		
		
			
			
		
		
			
			
		
		
	

方法二三四的区别于联系： 简单说一下:

是内联样式和css中写法上的区别，在html中可以通过style="" 给标签添加css样式， 也可以写在css中控制标签

详细介绍请看链接: https://blog.csdn.net/qq_43290288/article/details/102924012