php 细表格,HTML_CSS制作细框表格，细线框表格是我们在网页制作 - phpStudy

CSS制作细框表格

细线框表格是我们在网页制作中经常需要用到的效果之一，制作细线框表格的方法很多，代码兼容性最高的还是单元格背景填充法，不过常规写法产生的垃圾代码较多，今天我们转换思路用CSS来实现该效果。整个过程完全在Dreamweaver可视化界面下完成，不需要大家手工写任何代码，非常简单。

新建CSS样式

运行Dreamweaver，点击菜单“窗口”→“CSS样式”调用CSS面板。在面板中点击“新建CSS规则”按钮，如图1。

图1　　进入“新建CSS规则”对话框，将“选择器类型”设置为：高级；键入“选择器”名称：.bk(名称由大家任意确定，但该样式以后会反复调用，不可搞错)；“定义在”设置为“仅对该文档”，点击“确定”按钮完成，如图2。

图2

下面正式进入“CSS规则定义”对话框，点击选择分类中的“背景”，设置“背景颜色”为所需，本例值为“#000000”，即黑色(利用软件提供的颜色选择器，具体颜色代码并不需要手工输入)。这也是我们最终看到的表格边框颜色，点击“确定”按钮完成设置，如图3。

图3

现在名为“.bk”的CSS就建立好了，接下来我们为它添加一个子选择器。继续在CSS面板中点击“新建CSS规则”按钮，基本设置如图2，不过选择器名称定义为“.bk td”(表示这是一个依附于.bk的子样式)。依然进入“CSS规则定义”对话框，继续设置背景颜色，本例值为“#FFFFFF”，即白色，点击“确定”按钮完成。

至此在CSS面板中就能看到两个新建好的CSS样式了，以后你就可以任意调用了，如图4。

图4

插入表格并应用样式

今天我们需要调用的CSS样式已经全部定义好了，下面我们正式插入表格。点击菜单“插入”→“表格”，进行表格属性设置。其中行数、列数、表格宽度等值大家可以根据实际需要做灵活处理，下面三个值请一定按照要求设置：边框粗细：0；单元格边距：1；单元格间距：1，如图5。

图5

表格插入后，鼠标选择整个表格，鼠标指向窗口底部状态栏中标签选择器，右键点击其中的标签“

图6(点击看大图)

就这样容易，一个细线框表格就建立好了，你可以按F12键预览最终效果，如图7。

图7

由于我们采用的CSS定义效果，所以修改表格的线框颜色非常容易。“.bk”用于定义表格边框的颜色；“.bk td”用于定义表格内部的颜色，我们灵活设置就能变换出很多效果了

本文作者:相关阅读:

Linux系统网络配置详解

一个ftp类(ini.php)

Eclipse插件开发之新手入门

FC6光盘软件更新和Linux常用开发软件安装

vb.net入门——Windows窗体中的菜单操作

如何正确地在XHTML文档中使用JavaScript和CSS

在Win2003 IIS 6.0中安装ASP.net环境

用CSS实现鼠标单击特殊效果图

实验：Shell实践与设计

mysql数据库优化五步走

如何对PHP程序中的常见漏洞进行攻击(下)

Win2003服务器安全加固设置－-进一步提高服务器安全性

能在网页中写字和能擦写的js程序

社区(php&&mysql)六