国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 网页table表格边框做成一个像素

网页table表格边框做成一个像素

来源:程序员人生   发布时间:2014-08-14 22:20:57 阅读次数:4867次
网页table表格边框如何做成一个像素一个像素呢,大家都知道网页中table表格中,要显示边框直接border="1"就可以了,可是这样默认的效果确实很难看,如下图:

大家可以看到,默认的表格边框太大,在网页上显示不好看。如何达到一个像素呢,看下面的方法
  1. <table width="572"  border="0"  cellpadding="0" cellspacing="1" bgcolor="#625D59"> 
  2.                 <tr align="center" bgcolor="#CC99FF"> 
  3.                   <td width="46" height="20">编号</td> 
  4.                   <td width="167">图书名称</td> 
  5.                   <td width="90">出版时间</td> 
  6.                   <td width="70">图书定价</td> 
  7.                   <td width="78">作者</td> 
  8.                   <td width="114">出版社</td> 
  9.                 </tr> 
  10.              <tr align="left" bgcolor="#FFFFFF"> 
  11.                   <td height="20" align="center"></td> 
  12.                   <td >程序员人生</td> 
  13.                   <td align="center"></td> 
  14.                   <td align="center"></td> 
  15.                   <td align="center">&nbsp;</td> 
  16.                   <td>&nbsp;</td> 
  17.                 </tr> 
  18.             </table> 

效果如下:

这样就是表格一个像素了,这种方法就是采用表格间距为1,然后整个表格设置背景色,再设置tr或者td的背景色即可,使用这种方法的时候,最好用CSS写样式,因为每个tr或td都设置背景色很麻烦,用css全局定义就简单多了。
    这里再介绍另一个方法,表格属性设置如下:
  1. <table width="200" border="1"  style="border:1px solid #0058a3; border-collapse:collapse;"> 

再单独设置td
 

  1. <td style="border:1px solid #0058a3;">&nbsp;</td> 

这样的好处就是一个表格中,可以使多个单元格的边框颜色都不一样。
好了,今天就讲到这里,欢迎关注程序员人生网站

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生