复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）13 使用表格

计算机网络与网页制作 Chapter13:使用表格 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 13：使用表格 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *新建和修改表格 *用CSS设定表格样式 *导入数据 *对表格数据排序

目标  新建和修改表格  用CSS设定表格样式  导入数据  对表格数据排序 2

效果 文件()编(E)查看()收藏夹(A)工具T帮助(H 手机特征概述 以下列出了今天一些特惠手机的典型特征 特惠手机典型特征 编亏 手机型亏 特点述 中兴V880+ WDMA3G手机灰色·35英寸/320万像素/通定制札 诺基亚5230 3.2英寸200万像素30手机 WCDMA黑色非定制机 摩托罗ME722 WCDMA3G手机精蓝-3.7英寸/500万像素/滑羔/非定制机 摩托罗拉XT702 WCDMA3G手机黑色·3,7英寸/500万像素/滑盖/非定制机 中兴U880 GSMGPRS/EDGE/TD-SCDMA3G手札白色-3.5英寸/500万像素直板/移动定制机 摩托罗拉XT883 CDMA20003G手机黑色-4.0英寸/800万像素/倒滑虽/电信定制札 秉尼爱立信K171 GSMWCDMA3G手札白色-3.0英寸/500万像素/恻谮羔/定制和 兼尼爱立信A8l TDSCDMA3G手机撒榄黑色3.5英寸/500万像素/直板/移动定制机 HTC C510E GSM/GPRS/EDGE/WCDMA/HSDPA3G手札金棕色-3.4英寸/500万像素/直板 生100%

效果 3

1.导入表格数据 *查看数据:选中文件,快捷菜单打开方式>> Dreamweaver phone,zones. csv x 代码分國时國..C 中今②地址:1e// El/DreamWeaver5/150m0x0 ones.csv 编号,手 .2,中实v3,w题5手机灰色-,5英寸/30万像素/联通定制机 32诺基亚5230,3.英寸200万像素3手机WDMA黑色非定制机 43,摩托罗拉N72 YCDMA3手机精锐蓝-3.7英寸/500万像素/侧看盖/非定制机 54,摩托罗拉XT702,wDMA3G手机黑色-3.7英寸/500万像素/侧滑盖/非定制机 中兴U880, GSM/GPRS/EDGE/TD- SCDMA3手机白色-3.5英寸/500万像素/直板/移动定制机 6,摩托罗拉XT883,CDMA20003G手机黑色-4.0英寸/800万像素/侧滑盖/电信定制机 7,索尼爱立信SK17I, GSMWCDMA3G手机白色-3.0英寸/500万像素/侧滑盖/非定制 q/106索尼爱立信A8,TD-CDMA36手机颗榄黑色 英寸/500万像素/直板/移动定制机 HTCC510E, GSM/GPRS/EDGE/ YCDMA/ HSDPA3手机金棕色-3.4英寸/500万像素/直板 1110,LGP9203D, WCDMA3G手机黑色-4.3英寸/500万像素/双核/ Android2.2/直板/联通定制机 1211三星1589GM/CD200手机银色-35英寸/300万像素/ Android2,2/直板/电信定制机 /联通定制机 定制机 3擘托岁拉722CDA3手机精锐盃-3.7英寸/500像素/侧滑盖/非定制机 4摩托罗拉XT702 WCDMA3G手机黑色-3.7英寸/500万像素/侧滑盖/非定制机 5中兴U880 CS/ GPRS/EDGE/TD-SCDMA38手机白色-3.5英寸/50万像素/直板/移动定制机 6摩托罗拉XT883CDMA20003G手机黑色-4.0英寸/800万像素/侧滑盖/电信定制机 在 Dreamweaver 7索尼爱立信SK17IGSM/ CDMA3手机白色-3.0英寸/500万像素/侧滑盖/非定制机 中查看EXce数据 8索尼爱立信A8IT-SA3手机橄榄黑色-3.5英寸/50万像素/直板/移动定制机 GSM/GFRS/EDGE/ WCDMA/ HSDPA3手机金棕色-3.4英寸/500万像素/直板 11 10LGP9203 WCDMA3G手机黑色-4.3英寸/500万像素/双核/ Android2.2/直板/联通定制机 11三星I589 GSI/CDIA2000手机银色-3.5英寸/300万像素/ Android2.2/直板/电信定制机 13

1. 导入表格数据  查看数据：选中文件，快捷菜单 打开方式>>Dreamweaver 4 在Dreamweaver 中查看Excel数据

导入表格数据 在页面内定位光标,菜单文件>>导入>>表格式数据 导入表格式数据 数据文件CS5/1e80n07 phone_zones. csv(浏览 定界匯点 取消 表格宽度:匹配内容 帮助 代码拆分设计实时代码后实时视图检查9..C标题:手机特征列表 设为 百分比 手机特征概述 单元格边距 格式化首行[无格式] 单元格间距 边框1 以下列出了今天一些特惠手机的典型特征 手机型号 特点指述 中兴V880CDMA3G手机灰色-3.5美寸/320万像素/联 2诺萎亚52303.2美寸200万像素30手机 WCDMA黑色非定制机 3廖托罗拉E722 WCDMA3G手机精锐-3.7英寸/500万像素/侧滑盖/非定制机 4摩托罗拉X70CDMA3G手机黑色-3.7英寸/500万像素/侧清盖/非定制机 5中兴U880 GSM/GPRS./EDGE/ TD-SCDMA3G手机白色-3.5英寸/500万象素/直板/移动 6摩托罗拉XT83(CDM20003手机黑色-4.0英寸/800万像素/侧滑盖/电信定制机 素尼爱立信 MM/WCDMA3G手机白色-3.0英寸/500万像素/侧滑盖/非定制机 素尼爱立信A8I 杭黑色-3.5英寸/500万像素/直板/移动定制机 9Hcc510 E GSM/GPRS./EDCE/ WCDMA/ HSDPA3G手机金棕色一3,4英寸/500万像紊/直板 10LGP9203D CDMA3G手机展色-4.3英寸/500万像素/双核/ Android2.2/直板/联通 111891①0机色3于0万素12

导入表格数据  在页面内定位光标，菜单 文件>>导入>>表格式数据 5

2选中表格元素 *选择表格的行或列:单击行首或列首。如 果按住【Ctr】键则能同时选中多行或多列。 号手机型号 特点描述 手机型号 特点 →1中兴V880+ WCDMA3G手机灰色-3.5英寸/320万像素/联通定制机 1中兴V880+ WCDM 2谐基亚523032英寸200万象素36手机WCDA黑色非定制机 2亚52303.23 3摩托罗拉722 WCDMA3G手机锐蓝-3.7英寸/500万像紊/侧滑/非定制机 3[摩率托罗拉NE722WCDM 廖托罗拉XT702wC 5|中兴U880 GSM/ 定制 手机型号 特点措述 6[廖托罗拉XT88 cDMA 1中兴V880+ WCDMA3G手机灰色-3.5英寸/320万像紊/联通定制机 素尼爱立信 SKI7I 诺基亚52303.2美寸200万像素3G手机 WCDMA黑色非定制机 4廖托罗拉X702 WCDMA3G手机黑色-3.7美寸/500万像素/侧滑盖/非定制机 +5‖中兴U880 MM/GPRS/EDGE/ TD-SCDMA3G手机白色-3.5英寸/500万像素/直板/移动 10LGP9203D 定制 6摩托罗拉XT883CDM2003手机黑色-4.0美寸/800万像亲/侧清/电信定制机 11三星I589 制机 6

2. 选中表格元素  选择表格的行或列：单击行首或列首。如 果按住【Ctrl】键则能同时选中多行或多列。 6

选中整个表格 田 320万像素/联通定制机 MA黑色非定制机 /500万像素/侧滑盖/非定制机 *或者菜单修改>>表格>>选择表格

选中整个表格  或者菜单修改>>表格>>选择表格 7

选中一个或多个单元格 *不论选择一个还是多个单元格,按住【Ctr】 键再单击鼠标。 手机型号 特点描述 1中兴V88[DMA3手机友色-35寸/320万像素/联通定制机 2诺基亚523032英寸200万像素3G手机 WCDMA黑色非定制机 3廖托罗拉E722 WCDMA3G手机锐蓝-3.7英寸/500万像紊/侧滑/非定制机 4廖托罗拉XT702 WCDMA3G手机黑色-3.7英寸/500万像紊/侧滑/非定制机 5中兴U880 GSM/GPRS/EDGE/TD- SCDMA3G手机白色-3.5英寸/500万像亲/直板/移动 6托罗拉X83CDMA20036手机黑色-4.0英寸/800万像素/侧清董/电信定制机 索尼爱立信 GSM/WCDMA3G手机白色-3.0英寸/500万像素/侧滑盖/非定制机 8素尼爱立信A8ITD- SCDMA36手机橄榄黑色-3.5美寸/500万像素/直板/移动定制机 9 HTC C510E GSM/GPRS/ EDGE /WCDMA/HSDPA3G手机金棕色-3,4英寸/500万像素/直板 10LGP9203D WCDMA3G手机黑色-4.3英寸/500像素/双核/ android2.2/直板/联通 定制机 11三星I589 GSM/CDMA200手机银色-3.5英寸/300万像亲/ Android2.2/直板/电信定 制机

选中一个或多个单元格  不论选择一个还是多个单元格，按住【Ctrl】 键再单击鼠标。 8

3.修改表格大小 *先选中表格,之后在“属性”面板内修改 宽”值。 *可以是绝对的像素值 制机 *也可以是占浏览器窗口的百分比 盖/非定 /非定制 行0)12宽) 填充 对齐)默认 类()无/500万 列c)3 间距 边框)1 岩圆原始档 石 滑盖/ *或者手工调整表格的宽度和高度。 narol 9

3. 修改表格大小  先选中表格，之后在“属性”面板内修改 “宽”值。  可以是绝对的像素值  也可以是占浏览器窗口的百分比  或者 手工调整表格的宽度和高度。 9

调整某一行的高度(或某一列的宽度) 3廖托罗拉ME722 WCDMA 4廖托罗拉XT702 WCDMA 5|中兴U880 FGs)I/GP 6廖托罗拉XT883CDMA20 7索尼爱立信SK7 I GSM/WC 4廖托罗拉XT702 WCDMA3G手机黑色-3. 5中兴U880 GSM/GPRS/EDGE/TD-SCDMA 6廖托罗拉x CDMA0003G手机黑色 10

调整某一行的高度(或某一列的宽度) 10