分享
 
 
 

用DreamweaverMX巧妙格式化表格

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

表格制作好了,内容也有了,怎么看着别扭呀!哦,还没有给表格化化装--格式化表格呀,俗话说:人靠衣服也靠鞍,要想让你制作的网页漂漂亮亮、美观大方,还有很长的路要走呢!

一、格式化表格

表格的格式化主要包括表格的对齐方式、间距与边距的调整、边框的设置及背景的设置。大部分工作可以通过表格的属性面板完成,如图所示。

对齐:选定表格后,通过属性面板中Align(对齐)设置表格在网页中对齐方式:居中、居左或居右,如果你要使表格想去哪就去哪,想不去哪就不去哪,还得另想高招:

1、将表格放置到层中;

2、表格中嵌套表格。

CellPad(边距)和CellSpace(间距):搞清楚两个概念是关键:边距是指单元格中文本与单元格边框之间的距离,而间距是指单元格之间的距离,如图所示,两者的单位都是象素,默认情况下以间距2,边距1的设置显示表格。

表格的边框:可设置颜色和宽度,在“Border(边框)”域中默认值是1,增大数值可使边框宽度增加,形成立体边框,若输入的数值为“0”,则在浏览网页时不显示的表格的边框,只显示其中内容,这在网页设计中是应用比较多的。通过“BrdrColor(边框颜色)”域设置边框的颜色。

表格背景:在“BgColor(背景颜色)”和“BgImage(背景图象)”域中对背景可设置颜色和图象,在设置背景图象时若表格大于图象,则图象是重复出现的。有时可形成奇特效果。

二、格式化单元格

单元格的格式化包括单元格及其中内容的格式化,通过单元格的属性面板进行设置,如图所示。

单元格中文本:主要对字体、字号、颜色、对齐方式、是否换行等设置。在这里特别说明的是“NoWrap(换行)”的设置,默认单元格中的文本“换行”的,如果内容较长且要求相对完整,那么就要设置为“不换行”,选中“NoWrap”后的复选框即可,这样在网页浏览时表格的宽度可能超过显示器屏幕。选中“Header”后复选框可将光标所在行设置为标题:文本加粗并自动居中。

单元格背景:在“Bg(背景)”域中给单元格加上背景颜色或图象,方法与表格背景的设置相同。

单元格边框:在“Border(边框)”域中设置单元格的颜色。

三、使用设计方案格式化表格

使用“格式化表格”命令可以向表格快速应用一个预置的设计。您可选择选项定制该设计。若要使用预置设计:

1、选定表格然后选择“Commands/Format Table”。

2、在出现的对话框左边列表中选择一个设计方案,右边将显示该方案的一个样本。如图所示:

3、若要进一步定制设计,可以对“RowColor(行颜色)”,“TopRow(首行)”及“LeftCol(首列)”进行修改。

4、若要修改边框宽度,在“Border(边框)”域中输入一个数值,如果不需要边框则输入0。

5、若要对表格单元格(td标签)而不是表格行(tr标签)应用设计,请选择“Apply All Attributes to TD Tags Instead of TR Tags(将所有属性应用到TD标签而不是TR标签)”。

表格单元格格式化会覆盖您为该单元格所在行指定的一切格式。然而,如果您需要行中的所有单元格都格式化到一种格式,那么最好是格式化该行而不是该行的每个单元格,这样可以得到更加清楚而简练的HTML源代码。

6、点击“应用”或“确定”以使用选定的设计格式化表格。

四、格式化表格与单元格中的几个顺序问题

如果同时设置了表格背景和单元格背景,会出现何种现象呢?即那一种设置优先呢?

当在“文档”窗口中格式化表格时,您可以定义要应用到整个表格或是选定的行,列,单元格的属性。当某属性,如背景颜色或对齐方式,对整个表格设置与对表格某些单元格的设置不同时,理解Dreamweaver如何解释HTML源代码就很有用了。

当同样的属性在表格中被多于一次设置时,Dreamweaver将采用如下的解释方式:单元格格式(td标签的一部分)优先权高于行格式(tr标签),而行格式的优先权高于表格格式(table标签)。所以,如果您为一个单元格指定其背景色为蓝色,而将整个表格背景色设置为黄色,该蓝色的单元格并不会变为黄色,因为td标签的优先权高于table标签。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有