html表格边框的设置

 html表格边框的设置

这里介绍两种html表格边框的设置方法。

第一种是直接使用表格的border属性设置 第二种是利用表的背景色来设置边框

先来看第一种  

源码

  

    
直接使用表的 "border" 属性设置边框线
      

	    

		  名称
		
		

		 分类
		
	  
	  

	     

		   苹果
		 
		 

		   水果
		 
	  
   

效果:

直接使用表的 "border" 属性设置边框线

名称	分类
苹果	水果

这样是不是比较难看呢。原来表格的单元格之间默认情况下是有1像素的间隔的
如果设置单元格之间的间距为0，表格变为如下
源码：

  

    
直接使用表的 "border" 属性设置边框线
      

	    

		  名称
		
		

		 分类
		
	  
	  

	     

		   苹果
		 
		 

		   水果
		 
	  
   

效果

直接使用表的 "border" 属性设置边框线

名称	分类
苹果	水果

来看第二种。第二种直接用表格的背景来呈现表格的边框。

 

源码

    
以表格的背景作为边框线
    

	    

		 名称
		
		

		 分类
		
	  
	  

	     

		  苹果
		 
		 

		  水果
		 
	  
   

效果如图：

以表格的背景作为边框线

名称	分类
苹果	水果

看到了通过设置border="0",记不显示边框，通过设置cellpadding="1",来设置表格单元格间的间隔； bgcolor来设置了表格的背景色。这样就将背景色当作了表格的边框。 当然这做的话，就得将每个单元格的背景色改变一下，来覆盖表格的背景色。要不然就全显示为表格的背景色了。