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

原创 2005年05月28日 10:26:00
有过网页制作经验的朋友一定知道:一般来讲,把表格的边框定义为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)属性,否则不会出现预想的结果。

CSS设置1px漂亮表格边框?

在网页布局CSS设置1px漂亮表格边框? 在整理CSS问题及解决办法时看到的这样定义表格边框的方法,如果用表格的border="1"属性定义,实际显示的宽度要比1px粗。所以我直到现在都是定义 ta...

设置表格1px边框线的两种方式

方式一       使用 CSS属性 border-collapse 方式二

制作1px表格边框的十种方法(html和css)

第一种: 使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px 第二种: 第三种:利用二级表格 www.blueidea.com 第四种:...

移动端视网膜(Retina)屏幕下1px边框线的解决方法

本文主要介绍几种 移动端视网膜(Retina)屏幕下1px边框线的解决方法。 1、通过viewport + rem的方式来兼容。 目前这种兼容方案相对比较完美,适合新项目(老项目改用R...

7种方法解决移动端Retina屏幕1px边框问题

在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼,为什么我看不出什么差距了,结果UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样!!! 没有办法,只有在后面的版本中去...

web2.0时代乃至html5时代 一像素边框表格的几种实现方法

简写文章,以后详加阐述。。 table 属性:

移动端1px边框制作

未经允许,不得转载!! 水平有限,欢迎交流、指正!! 关于设备像素比(devicePixelRatio) 所谓设备像素比(devicePixelRatio[dpr])指的就是物理...
  • ime33
  • ime33
  • 2017年03月28日 18:40
  • 258

1像素表格(1px表格)的5种制作方法

在转载CSS觉问题及解决办法时看到的这样定义表格边框的方法,如果用表格的border="1"属性定义,实际显示的宽度要比1px粗。所以我直到现在都是定义table的left和top边框,然后定义td的...

移动端视网膜(Retina)屏幕下1px边框线 解决方案 -- 不错 保留

移动端视网膜(Retina)屏幕下1px边框线 解决方案

移动端1px边框实现

一看上篇博文的发布日期,就知道自己好久没有写技术文章了。一是可能工作比较忙,二是可能自己也比较懒散了。今天重新敲起键盘。来跟大家分享一个最近新学到的技术。一是为巩固自己的掌握程度。也希望能帮到有需要的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:制作1px边框表格的几种方法
举报原因:
原因补充:

(最多只允许输入30个字)