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来设置了表格的背景色。这样就将背景色当作了表格的边框。 当然这做的话，就得将每个单元格的背景色改变一下，来覆盖表格的背景色。要不然就全显示为表格的背景色了。