Dreamweaver制作细线表格三例
>首页 -> 社会专题 -> 制作教程 2011-02-10 来源: 作者: 【】 浏览:717

表格是在网页设计中用的最多的元素,大多数的网页都是使用表格来组织的。利用表格来组织网页内容,可以设计出布局合理、结构协调、美观匀称的网页。我们今天要讲的不是表格在控制页面元素的应用,而是表格边框的一些技法。合理的设置表格边框,有时可以得到你意想不到的效果!本文讲述的内容是细线边框表格的制作,涉及的知识比较基础,仅供新手参考。 

一.表格基础: 

<table>:表格的标识符,用来界定表格的范围。<table>标签的属性: 

border:表格边框宽度所占的像素点数。 

width和height:指定表格的大小。“width”规定表格的宽度,“height”指定表格的高度。 

align:表格与其相邻文字的位置。参数值为left(居左)、center(居中)、和right(居右)。 

cellspacing:指定表格各单元格之间的空隙。 

cellpadding:指定单元格内容与单元格边界之间的空白距离的大小。 

<TR>:行标签。 <TR>标签的属性: 

align:表示该行中各单元格内容是左对齐(left)、水平居中(center)和右对齐<right>的。 

valign:表示该行中各单元格内容是紧靠上沿儿(top)、垂直居中(middle)和紧靠下沿儿的(bottom)。 

<TH>和<TD>:都是用来规定单元格内容的,<TH>规定表头元素的内容(表头元素一般位于每列的首行,用来说明该列的具体数据是回于哪个对象的)。<TD>规定该单元格的内容。<TH>和<TD>标签的所有属性及相应的属性功能是完全一样。 

rowspan:表示该单元格所跨的行数。 

colspan:表示该单元格所跨的列数。 

align 、valign:用法同上。指定单元格内容的位置。 

二.用表格制作跨幅细线: 

有时候在网页排版时,我们需要一条细线,用图片似乎有点劳师动众了,其实,这个小问题用表格就能搞定。 

制作过程: 

1、插入一个一行一列的表格。 

2、将表格的“cellpadding”“cellspacing”都设置为“0”。 

3、将单元格的“bgcolor”设置为“#000000”(当然你也可以设置为其他的颜色,主要取决于你需要什么颜色的细线)“height”设置为“1”。 

4、查看源代码,将<td></td>中的“ ”去掉就ok了。 

原理:这种细线效果其实就是一个高为“1pix”的表格。 

三.细线表格 

我们常常遇到添加表格边框以区别不同的内容的情况,但将表格边框宽度“border”设置为“1”时,边框又显得过于突出,那么,能不能制作细线边框呢? 

制作原理: 

1、插入一个一行一列的表格。 

2、将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。 

3、将表格的“bgcolor”=“#000000”。 

4、将单元格的“bgcolor”设置为“#FFFFFF”(当然你也可以设置为其他的颜色,主要取决于你需要什么颜色的边框)。 

5、预览页面。 

原理:前面已经讲过属性“cellspacing”表示的是单元格与单元格的距离。我们在设置整个表格的背景色时也包含了这个距离间的空白(我们设置的是“1pix”),而设置单元格的背景色时却不包含这个距离间的空白,这样以来,你在浏览器中看到的表格边框线其实就是单元格与单元格的距离所显示的。 

四.隔距表格: 

这种效果使用了表格的嵌套。也就是在一个一行五列表格的每个单元格里又嵌套了五个单行单列的表格。 

下面看看他的制作过程:  

1、插入一个一行五列的表格。 

2、将表格的属性设置为:width="400" border="0" cellspacing="2" cellpadding="1"。 

3、将五个单元格的背景色均设置为:bgcolor="#FFFFFF"。 

4、在每个单元格内再插入一个表格,在属性面板上设置插入的表格的属性:width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"。 

5、将插入的表格的每个单元格的背景色设置为白色:bgcolor="#FFFFFF" 。 

6、预览页面 

原理:前面已经讲过属性“cellpadding”表示的是单元格内内容与单元格边界(四周)的距离。对照上面的原理,其实在浏览器中看到的表格边框线其实就是单元格内的内容(在这里是指内嵌的表格)与单元格的距离所显示的。知道了这一点,也就不难理解在设置内嵌单元格的属性时为什么要使width="100%"、height="100%"。这样做是为了让嵌入的表格在上下左右方向上将被嵌单元格占满,但由于已经设置了被嵌表格的cellpadding="1",所以嵌入的表格尽管是100%,依然会在4边留下“1pix”的空位,这“1pix”的空位也就是在浏览器中显示的“边框线”! 

我们也可以通过修改表格的亮暗边框来实现,但由于与网景浏览器(NC)的兼容问题,到了DW4后,此功能被取消。 

通过上面的三种细线表格的原理学习,不难发现在这里面占着重要位置的属性就是“cellspacing”和“cellpadding”。

您看到此篇文章时的感受是:
Tags: 责任编辑:佚名
免责申明: 除原创及很少部分因网文图片遗失而补存外,本站不存储任何有版权的内容。你看到的文章和信息及网址索引均由机器采集自互联网,由于时间不同,内容可能完全不同,请勿拿本网内容及网址索引用于交易及作为事实依据,仅限参考,不会自行判断者请勿接受本站信息,本网转载,并不意味着赞同其观点或证实其内容的真实性.如涉及版权等问题,请立即联系管理员,我们会予以更改或删除,保证您的权利.对使用本网站信息和服务所引起的后果,本网站不作任何承诺.
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论:0条】 【关闭】 【返回顶部
微信分享二维码

打开微信扫一扫分享

上一篇PS烟花效果制作 下一篇PS:合成恐怖的白衣半身幽灵教程
密码: (新用户注册)

最新文章

图片主题

热门文章

推荐文章

相关文章

便民服务

手机扫描

空间赞助

快速互动

论坛互动
讨论留言

有事联系

有哪个那个什么的,赶紧点这里给DOVE发消息

统计联系

MAIL:gnlt@Dovechina.com
正在线上:1

版权与建议

任何你想说的