网站制作

本类阅读TOP10
·IIS 安装配置全攻略
·用VS.NET打开网上下载的.NET web项目出错的解决办法
·HTML 4.0 语言快速参考
·限制TextArea区的文字输入数量
·如何在网页上实现进度条
·Apache的配置步骤及测试
·谈谈Jesse James Garrett提到的Ajax
·html基础学习笔记（2）
·页面垂直居中的两种方法
·用asp遍历目录下文件的例子

→ 分类导航
VC语言Delphi
VB语言ASP
PerlJava
Script数据库
其他语言游戏开发
文件格式网站制作
软件工程.NET开发
你想就此主题发表评论请到：http://www.faridea.com/bbs/Announce/Announce.asp?BoardID=301&ID=3923&AUpflag=1&ANum=1

《Html旁门左道》第六天：表格线的制作技法

作者：未知 来源：月光软件站 加入时间：2005-2-28　月光软件站
 
表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示：
此主题相关图片


首先我们使用经典的“21法则”：也就是cellpadding为2，cellspacing为1，表格背景有颜色，td再设背景色，利用表格间的缝隙来加上交叉线

<table width="500" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
  <tr bgcolor="#FFFFFF">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

由于不想帖子太长，请手动多加一些<tr>使效果更明显，当然最后我会给出一个Example下载。

这是N年一直在使用的方法，简单易用，但是，现在都在强调样式分离，OK，为了追赶潮流，让我们用CSS来做这件事。

CSS方法1：模仿“21法则”
表格仍然是那个表格，为了方便我们给表格起名为

<table id="table1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

OK，这是一个干净的表格，我们用CSS来定义他

#table1{
     background-color:#000000;//表格整体背景黑色，也就是缝隙间的颜色
     width:500px;
     padding:0px;
     border-spacing:1px;//表格缝隙1个px
}
#table1 td{
     background-color:#FFFFFF;
}

但是，你会发现在IE下显示表格线会显得很粗。。。由于IE对CSS2标准支持不够，所以显示不是像预想的一样（广告时间：在这里推荐一下Mozilla浏览器：））

那么如何使用CSS，才能在所有浏览器均显示正常呢？并且不利用这种缝隙法的歪门邪道，而就是利用border来做呢：），OK答案就在下面。

重新建立一个表格id="table2"

#table2{
     border:1px solid #000000;//为表格外面画线
     width:500px;
     padding:0px;
     border-collapse:collapse;//由于td四周画线，所以某些线会绘制两次，会变粗，使用这个属性可以自动合并同类项
     border-spacing:0px;//表格间无需空隙
}
#table2 td{
     border:1px solid #000000;//为td四周画线
}


OK，以上CSS和“21法则”的效果是完全相同的，IE和Mozill均显示正常，而且是样式与表格进行了脱藕：）

完整代码下载：

此主题相关文件 102537.zip


相关文章：

相关软件：