html表格边框的设置

 html表格边框的设置

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

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

  先来看第一种  

• 源码

•   <table border="1"  bordercolor="#00CCCC"  width="300">
      <caption>直接使用表的 "border" 属性设置边框线</caption>
        <tr>
  	    <td>
  		  名称
  		</td>
  		<td>
  		 分类
  		</td>
  	  </tr>
  	  <tr>
  	     <td>
  		   苹果
  		 </td>
  		 <td>
  		   水果
  		 </td>
  	  </tr>
     </table>

  
  效果:
  

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

  名称	分类
  苹果	水果

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

•   <table border="1"     cellspacing="0"    bordercolor="#00CCCC" width="300">
      <caption>直接使用表的 "border" 属性设置边框线</caption>
        <tr>
  	    <td>
  		  名称
  		</td>
  		<td>
  		 分类
  		</td>
  	  </tr>
  	  <tr>
  	     <td>
  		   苹果
  		 </td>
  		 <td>
  		   水果
  		 </td>
  	  </tr>
     </table>

  
  效果
  

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

  名称	分类
  苹果	水果

  
  

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

•  

  源码

• <table border="0" cellpadding="1" bgcolor="#00CCCC" width="300">
      <caption >以表格的背景作为边框线</caption>
      <tr>
  	    <td bgcolor="#FFFFFF">
  		 名称
  		</td>
  		<td bgcolor="#FFFFFF">
  		 分类
  		</td>
  	  </tr>
  	  <tr>
  	     <td bgcolor="#FFFFFF">
  		  苹果
  		 </td>
  		 <td bgcolor="#FFFFFF">
  		  水果
  		 </td>
  	  </tr>
     </table>

  
  

• 效果如图：

  
  

  以表格的背景作为边框线

  名称	分类
  苹果	水果

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