当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 制作1px边框表格的几种方法

Dreamweaver
Dreamweaver 限制访问的BUG
Dreamweaver 数据库路径的使用
用Dreamweaver做搜索表单
Dreamweaver 事件简述
[Dreamweaver教程]Meta标签详解
提高 Dreamweaver行为全接触(5)
提高 Dreamweaver行为全接触(1)
提高 Dreamweaver行为全接触(3)
提高 Dreamweaver行为全接触(2)
提高 Dreamweaver行为全接触(4)
Dreamweaver MX2004视频宝典教程(7) Dreamweaver安装与启动
Dreamweaver MX2004视频宝典教程(9) 工作区结构
Dreamweaver MX2004视频宝典教程(5) 配色原则
Dreamweaver MX2004视频宝典教程(4) 网页布局
Dreamweaver MX2004视频宝典教程(8) Dreamweaver文档使用
Dreamweaver MX2004视频宝典教程(10) 菜单概述
Dreamweaver MX2004视频宝典教程(3) 网页的基本元素
Dreamweaver MX2004视频宝典教程(6) HTML与渲染
Dreamweaver MX2004视频宝典教程(1) 课程简介
Dreamweaver MX2004视频宝典教程(2) 网站与网页的概述

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 74 ::
收藏到网摘: n/a

    有过网页制作经验的朋友一定知道:一般来讲,把表格的边框定义为1px时,即border=1,而实际上是2px。而我们在很多时候需要那种真正的边框为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定义(一)

  代码为:
  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定义(二)

  代码为:
  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)属性,否则不会出现预想的结果。