分享
 
 
 

网页制作教程4——表格的终极用法

王朝html/css/js·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

前面我们已经讲了一些利用表格来排版的例子。在用表格排版的时候,有时候需要表格套表格――即表格的嵌套来达到我们所需的效果。表格的嵌套不要太多,一般不超过三层,否则下载起来速度就有的你受的了。还是那句老话啦,大家还是要通过实际操作去学表格的排版。

这章我们重点要说的是表格的风格设置问题。其实用表格可以做出很多我们意想不到的效果呢~:)

然后还要介绍一下虚线表格、阴影表格和园角表格的做法。

本篇的主要内容是:

DW和FP中的表格属性

? 表格属性 表格边框 表格背景图片

虚线表格

带阴影的表格

园角表格

DW中的表格属性

先说说DW里的表格。通过表格的属性对话框,我们可以设置表格的高度、宽度、边框、对齐方式、背景色和背景图片等属性。

指定宽度可以选择象素和百分比两种形式。一般我们都使用百分比形式,这样在不同的分辨率下表格的显示是按照页面的比例自动拉伸的。边框可以设置颜色和粗细,注意看右边的亮边框和暗边框选项,如果不对亮边框和暗边框进行设置,那么“表格边框”设为1的时候,做出来的表格并不是常见的那种1个象素边框的细表格,而是像下面这种表格:

将表格的亮边框和暗边框设置为不同颜色,再指定表格的背景颜色,就可以做出很漂亮的表格效果。下面的表格就是我们做出的表格

在属性框里还有背景图片这个选项,选择合适的图片,就可以用图片来填充表格背景。但是这样填充的背景是重复填充的。

好了,表格的基本设置就是那么些内容了,利用这些基本设置就可以做出千变万化的表格效果了。下面我们来讲三种特殊表格的做法。

虚线表格

现在似乎相当流行呀。上面我们已经介绍到,在属性里的页面属性中就可以选择“虚线”选项,但是这要在IE5.5以上的版本才能支持,网景浏览器则根本不支持。

有一种最简单的办法,在各个浏览器中都能支持,而且很美观。

先在photoshop里做一个1×2象素大小的图片,一半填充为白色,一半填充为黑色。如图所示:

然后在网页编辑器如DW中插入表格,在表格属性里将表格的间距设置为1,边距和边框都设为0(这一步非常重要!)将上面做的1×2的图片设置为表格的背景。

这时候我们看到表格成了这个样子:

再选中单元格。记住不是选择整个表格而是选择单元格。我们可以看看两者的区别。

选择背景颜色为白色,就得到了虚线表格的效果。

带阴影的表格

由于这个表格制作起来比较麻烦,还要修改html代码,很多人可能做半天也很难做出来(我第一次就做了N久~大概是我太笨了~~?!)干脆就把代码写出来,大家贴过去就是了~~有偷懒得嫌疑,呵呵……

园角表格

先做出如下两张图片(具体的作图方法就不用说了吧?……第二张图片是第一张图片垂直翻转得到的):

创建一个2行一列的表格,把两张图片分别插入表格的第一和第二行。把表格的宽的设置为和图象的宽度相同,如我们设置的宽度是140象素。

好了,对表格的用法我们就介绍到这里,我觉得已经相当全面了,而且我已经解说得很简单明了了,希望对大家有点帮助~

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有