站内搜索: 您现在的位置: 肿瘤咨询在线 >> 文章中心 >> 网络检索 >> 正文

制作1px边框表格几种方法

更新时间:2003-6-9 21:43:55 来源:WEB 作者:web 可选字体【

在制作Web页面的时候经常需要制作边框为1像素的表格,但是当我们在DW或FP中把表格的边框定义为1px时(border=1),得到的效果并不理想,这是由于表格边框有表格有亮边框(bordercolorlight)和暗边框(bordercolordark)这两种属性的缘故。那么在这里就介绍几种1px表格的制作方法。

  一、用嵌套表格

  用两个表格嵌套,外层的表格的长与宽比里层的多出2px,并设置对齐属性为水平居中、垂直居中,然后把外层表格的背景设为你需要的边框颜色,里层表格背景设为与网页背景相同,这样就实现我们的愿望了,实例代码如下:
  <table cellspacing="0" cellpadding="0" bgcolor="#000000" width="32" height="32" border="0">
  <tr>
  <td align="center">
  <table cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="30" height="30" border="0">
  <tr>
  <td></td>
  </tr>
  </td>
  </tr>
  </table>

  二、设置亮、暗边框颜色

  表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性,把表格边框(border)设为1px,亮边框(bordercolorlight)设为背景色,暗边框(bordercolordark)设为你需要的实际边框颜色就可以了,实列代码如下:
  <table border="1" cellpadding="0" cellspacing="0" width="32" height="32" bordercolorlight="#000000" bordercolordark="#FFFFFF">
  <tr>
  <td></td>
  </tr>
  </table>

  三、用CSS定义(一)

  css代码为:style="border-collapse: collapse"
  实例代码如下:
  <table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0">
  <tr>
  <td></td>
  </tr>
  </table>
  如果你用过Frontpage xp,你会发现,在Frontpage xp中定义的表格默认的设置就是用CSS定义过了的。

  四、用CSS定义(二)

  css代码为:style="border: 1px solid #000000;"
  实例代码如下:
  <table cellspacing="1" width="32" height="32" style="border: 1px solid #000000; ">
  <tr>
  <td></td>
  </tr>
  </table>
  有一点一定要注意:这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性,否则不会出现预想的结果。

    免责声明:
    本文仅代表作者个人观点,与肿瘤咨询在线网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。


  • 上一篇文章:
  • 下一篇文章:
  • 网站简介 - 联系站长 - 友情链接 - 网站地图 - sitemap - 网站导航 - 进站必读 - 招纳义工