[ChneChen的技术心得][THML代码]1px边框表格制作谈

最新推荐文章于 2022-05-24 16:08:40 发布

ChneChen

最新推荐文章于 2022-05-24 16:08:40 发布

阅读量1.9k

点赞数

分类专栏：【计算机技术类】平面设计/网页设计【ChneChen的文字】ChneChen的文字文章标签： border table css html bbs xp

本文链接：https://blog.csdn.net/chnechen/article/details/353914

版权

【ChneChen的文字】ChneChen的文字同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

【计算机技术类】平面设计/网页设计

16 篇文章 0 订阅

订阅专栏

----------------------------
第一种方法：

'bordercolorlight的值一定要和bgcolor（背景）一致，不然的话你可以看到边框很粗,
当然用一些特殊的色彩搭配会有很好的效果，请自己在运用中实践。
________________________________________________

第二种方法：

'cellspacing=1 这是间距，也就是边框的宽度
'bgcolor=#009900 这是边框的颜色

'注意第二种方法和第三种方法做出来的边框是不同的，
'第一种方法做出的边框"有"立体凹凸感，但四个角"不是"很好的封死。
'第二种方法做出的边框"没有"立体凹凸感，但四个角"是"很好的封死。
________________________________________________

第三种方法

<table width="450" border="1" cellspacing="0" cellpadding="2" bordercolor="#999999">
<tr>
<td bgcolor="#CCCCCC">第一行第一栏</td>
<td colspan="2" bgcolor="#CCCCCC">第一行的第二、三栏</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#CCCCCC">第二行及第三行的第一栏</td>
<td bgcolor="#CCCCCC">第二行第二栏</td>
<td bgcolor="#CCCCCC">第二行第三栏</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">第三行第二栏</td>
<td bgcolor="#CCCCCC">第三行第三栏</td>
</tr>
</table>

________________________________________________

其余方法：

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

（来源：视觉中国　作者：钟钟　　发表时间：2002-02-17 10:21:25）

简介：
时常看到有朋友在论坛中提出这样的问题，所以写了这篇文章……

有过网页制作经验的朋友一定知道：一般来讲，把表格的边框定义为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>
-----------------------------------------------------------------
<table
cellspacing="1" width="32" height="32" style="border: 1px solid #000000; border-width:0 1 1 1">
<tr>
<td>　</td>
</tr>
</table>
-----------------------------------------------------------------
有一点一定要注意：这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性，否则不会出现预想的结果。

我的总结：用CSS定义中的两种方法最好，也可以直接在HTML中运用，但，注意：
（一）中的边框颜色靠 ——》表格——》边框颜色来定义。
（二）中的边框颜色靠 style="border: 1px solid #000000;" 中的#000000来定义。。
（二）中加了border-width:0 1 1 1的那个是来定义边框四周是否有的，其中1为有，0为无。

*****************
*****************
以下是另一个地方找到的：

还有一种，就是一些大型的BBS的通用的边框做法。因为比较难说清楚，所以就把代码写下来给大家参考一下。
<html>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
   <td height="1">*</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
   <td width="1" bgcolor="#000000">*</td>
   <td width="598">这里是表格的内容！</td>
   <td width="1" bgcolor="#000000">*</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
   <td height="1">*</td>
</tr>
</table>
</body>
</html>

大家可以把上述代码copy到HTML文件中试试效果。不过请注意，先把上述代码中的"*"删除掉。你能体会出其中的奥妙之处吗？另外，更复杂的表格也可以利用上述同样的方法得到。我们比较一下浏览器的兼容性。如果只是把"*"去掉，那么上述方法在Netscape的低级版本中是不兼容的（高级版本的Netscape应该没问题，比如说Netscape 6.0以上）。不过如果把"*"换成插入一个1px*1px的透明的图片，那么这个方法无论是对IE，还是对Netscape的任意版本都是兼容的。
' width= 最好不要用%，不然插入图象后边框就会出问题。。

________________________________________________

又一法：

原理：表格和单元格都用背景，但互相颜色不同，单元格背景遮住了和表格重合的部分，就出现了边框。
但要注意，表格的属性一定要设置为边距为1。不然效果不好。

ChneChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ChneChen的技术心得][THML代码]1px边框表格制作谈

----------------------------第一种方法：   bordercolorlight的值一定要和bgcolor（背景）一致，不然的话你可以看到边框很粗,当然用一些特殊的色彩搭配会有很好的效果，请自己在运用中实践。_____________________________________
复制链接

扫一扫