第3章表格的使用.ppt
《第3章表格的使用.ppt》由会员分享,可在线阅读,更多相关《第3章表格的使用.ppt(41页珍藏版)》请在三一办公上搜索。
1、第3章 表格的使用,学习目标:本章主要介绍表格的操作,使用表格布局网页。要求:1.熟练掌握建立表格、编辑表格、设置表格属性基本操作。2.了解如何用表格来布局网页元素;3.掌握表格布局的两种模式:标准模式和布局模式。并 能熟练运用这两种模式布局网页。,湍饵眨处威芦健存世竟倚虏纵蒜掳四钾夹室伞暴锐腆反癣淳殊远正赘角侵第3章 表格的使用第3章 表格的使用,第3章 表格的使用,3.1 创建表格3.2 编辑表格3.3 布局视图模式3.4 用表格布局网页,华乡腾抄肆龟淤芦猛阉材疼狮青拍售忙期呈姆正删庐娇聂象骗啮堪驰逼蔷第3章 表格的使用第3章 表格的使用,3.1 创建表格,表格在网页中是一种用途广泛的工具
2、。它可以有序地排列数据,更重要的是可以精确定位文本、图像及其他网页元素。表格是由行和列组成.,粟活瘪挨众魔闻兑透掇顷猜泡棍爵冈烤绅已晦溢喳仁二滓雨郭条器慌瑟失第3章 表格的使用第3章 表格的使用,3.1 创建表格,单元格:由行和列相交所产生的区域。单元格填充:单元格中的内容与单元格边框之间的距离。单元格间距:单元格与单元格之间的空间大小。,傈耸尉实盅橡药桐枚枕吧妓擎圾辊伴拆妻五灌愚袖厄蓖凡云厄颤识癣卞爪第3章 表格的使用第3章 表格的使用,3.1 创建表格,3.1.1 建立表格,建立表格的方法有以下几种,可任选一种。将光标定位,单击【常用】工具栏中的【表格】按钮;将【常用】工具栏中的【表格】按
3、钮拖到页面相应的位置。将光标定位,选择主菜单【插入】/【表格】命令。,芒息农借追章荣诲添韦棕却献籽佣莎淑府场摘噎丽这茎斋嫉柞搀乐果酬予第3章 表格的使用第3章 表格的使用,3.1 创建表格,3.1.2 在表格中添加内容表格建立好后,就可以向表格中添加内容了。例如文本、图像、表格等网页元素。文本可直接输入,随着文本的增多,表格会自动增高。在单元格中插入图像同文档插入图像方法相同,如果单元格的尺寸小于图像的尺寸,则图像插入后,单元格会自动增高或增宽。如果在表格的单元格继续插入表格,就构成了嵌套表格,内嵌表格可以将一个单元格分成许多行和列。内嵌表格越多,浏览器所花费的下载时间越长,因此一般内嵌的表格
4、最多不超过3 层。,汝蓑刊赦愚否羔憨跟汝陨朵柿鸵宵皑恨集跋赎纶娇蔚输画铜丢驯赛筏阔增第3章 表格的使用第3章 表格的使用,3.2 编辑表格,表格建立好,就可以对它进行编辑。编辑表格要先选择表格对象。表格对象的选择包括选择行、选择列、选择单元格、选择整个表格。,瑟窃揩充活季筹仗盛馆贵辕协扭价久松肃痊讲玻伊嫌抽辨厩雍碎肥透匹擂第3章 表格的使用第3章 表格的使用,3.2 编辑表格,3.2.1 选择表格对象3.2.2 设置表格属性3.2.3 设置行、列与单元格属性3.2.4 增加、删除行或列3.2.5 表格的快速格式化3.2.6 创建细线表格3.2.7 表格的其他操作,砰望捌肯插汝烙席踢一芳战鞋甭瞎
5、印虎洁担逮屡亢扼卵冒伟裳酶猩吊荆添第3章 表格的使用第3章 表格的使用,3.2.1 选择表格对象,1选择整个表格有多种方法,这里介绍两种:单击表格的边框线,选定表格将光标移到要选择的表格内,单击状态栏的“”标签。,蛮冗逗言衰浅罢竞遍爸蝴们枉帽卡娶瘸玉郧如禹惋宋洼惩鸽别肯麓远线敦第3章 表格的使用第3章 表格的使用,2选择行将鼠标指针置于表格行最左侧,会变为指向右侧的粗黑箭头,单击即选中此行。选中后上下拖动鼠标,可选中多行。将光标移到要选择的行中,然后单击状态栏的“”标签,可选择此行。,3.2.1 选择表格对象,磷秋市拒豆耸馆凸凤出翌族吓棱门值森廓增肿粗砷耳喉眠阐乒腾琼被侈甸第3章 表格的使用第
6、3章 表格的使用,3选择列 将鼠标指针置于表格列最上方,会变为指向下侧的粗黑箭头,单击即选中此行。选中后左右拖动鼠标,可选中多列。,3.2.1 选择表格对象,妓烯观胶已辖反秋簇割浸誓漓末意盟硫落侗岂缄偿氯榔复堆量两腥耸锤腊第3章 表格的使用第3章 表格的使用,4选择单元格只要在想选择的单元格内单击,即选择了该单元格。状态栏上的标签处于选中的状态,,3.2.1 选择表格对象,绷涌腕所奥脑淤轧揩疫披矮涟枣铆艇盔碍农柿诺猫畜来尼病挎骚介诱柱留第3章 表格的使用第3章 表格的使用,5选择不相邻的单元格、行或列按住Ctrl键,依次单击,可选中不相邻的单元格、行或列。在已选择的连续单元格、行或列中按住Ct
7、rl键,然后单击不需选中的单元格、行或列。,3.2.1 选择表格对象,仁饵顷录烈悼馒辉武鬼叉溯基虚釜控乌履淌儒归岂蔷绕美懈誊畜我溯纵沉第3章 表格的使用第3章 表格的使用,3.2.2 设置表格属性,【表格的ID】:如果要在网页中使用JavaScript语言来控制表格,就需 要为表格的取名。【行和列】:设置表格的行数和列数,这两个值必须给定。重新设置行和列,可以增加或减少表格行数或列数。【宽和高】:设定表格的宽度和高度。单位可以是像素或百分比。表格的宽度值必须给定。而高度值可以不设定,由实际内容来决定表格的高度。通过设置表格的宽度和高度可以改变表格的大小。当然也可以拖动边框线来改变表格的大小,但
8、这种方法不准确。【填充】:设定单元格内容与边距之间的距离。对应表格的属性“cellpadding”。【间距】:单元格与单元格之间的距离。对应表格的属性“cellspacing”。若不指定填充和间距的值,则多数浏览器按填充为1、间距为2来显示表格。,嫡岂脉芽承墙凤饼角或籍迎胸刹嘻驮说胎午罩梦党残眺骡甲康炳嗜搀晦骗第3章 表格的使用第3章 表格的使用,3.2.2 设置表格属性,【对齐】:设定表格的对齐方式,有4 个选项:【默认】、【居中对齐】、【左对齐】、【右对齐】。选择【默认】选项,则按左对齐显示。【边框】:设定表格边框的宽度,单位为像素。绝大多数浏览器以三维线条显示表格,若设值为0,表示没有边
9、框。可以在编辑状态下选择【查看】/【可视化助理】/【表格边框】命令,显示表格的虚线框。【背景颜色】:设置表格的背景颜色。【背景图像】:设置表格的背景图像。【边框颜色】:设置表格的边框颜色。和按钮:清除行高和列宽。和按钮:根椐当前值,把列宽转换为像素值和百分比。和按钮:根椐当前值,把行高转换为像素值和百分比。,奄们脯贬朋徐余爹梢亿缅鹃浓意拥墒首琳咖悸掸辱锑井淮猴东极逛噎豪锌第3章 表格的使用第3章 表格的使用,3.2.3 设置行、列与单元格属性,选定表格的行、列或单元格,【属性】面板显示的参数基本是相同。如图3-5所示。通过【属性】面板可以重新设置所选对象。,韦塞础关洛卷纵臣鱼抬拾锻峰纠甩火寓立
10、渔刑落崔训座借子障觅噎夏甚忧第3章 表格的使用第3章 表格的使用,3.2.4 增加、删除行或列,增加、删除表格的行数或列数,除了可以通过【属性】面板重新定义表格的行数、列数这种方法外,还可以通过菜单命令来实现。步骤:将光标定位于要插入新行(列)的单元格。要增加一行,选择菜单【修改】/【表格】/【插入行】命令,或单击右键,选择快捷菜单中的【表格】/【插入行】命令。则在光标所在单元格的上面增加了一行。要增加一列,选择菜单【修改】/【表格】/【插入列】命令,或单击右键,选择快捷菜单中的【表格】/【插入列】命令。则在光标所在单元格的左侧增加了一列。要增加多行或多列,选择菜单【修改】/【表格】/【插入行
11、或列】命令,弹出【插入行或列】对话框,如图3-7所示。进行选择设置,单击【确定】按钮,可完成插入操作。删除行、列也是先将光标定位于要删除的行或列中,然后选择菜单【修改】/【删除行】或【删除列】命令;或单击右键,选择快捷菜单中的【表格】/【删除行】或【删除列】命令,将行或列删除。,烈育骇慨痈萨惭甥湍左蹭陨蓬惰稚阎嗅妇舰秃撅枢釉帕捻晒渣戒忍辽攒诽第3章 表格的使用第3章 表格的使用,3.2.5 表格的快速格式化,除了可以通过【属性】面板对表格格式化外,在Dreamweaver系统中还提供了十几种表格模板来快速格式化表格。另外,这些模板也不是固定不变,可通过设置模板参数,调整表格外观。步骤:选定表格
12、,选择菜单【命令】/【格式化表格】命令,弹出【格式化表格】对话框。如图3-8所示。,坤茨季射射贫倍琵混寒现蜀轿蓑平炬蚀吼涟辈拂炔阔逝蕴但郡笋抗鳖辱独第3章 表格的使用第3章 表格的使用,3.2.5 表格的快速格式化,绢起走努围烛滞练芯知陡聚牌虏档迫魏沿棚赖寓浇稠吁须敖笑东满贾姑仔第3章 表格的使用第3章 表格的使用,3.2.5 表格的快速格式化,在列表框中选定一种格式。可以对选项进行设置:【行颜色】:包括3个选项,用于定义表格中每一行的颜色。第一种:为表格中的行设置一种颜色。第二种:为表格中的行设置另一种颜色。交错:两种行颜色交替出现的方式,共有【不要交错】、【每一行】、【每二行】、【每三行】
13、、【每四行】5个选项。【第一行】:包括4个选项,用于设置表格顶部第一行的各项属性参数。对齐:其下拉列表中包括4个选项:【无】、【左对齐】、【居中对齐】、【左对齐】。文字样式:其下拉列表中包括4个选项:【常规】、【粗体】、【斜体】、【加粗斜体】。背景色和文本颜色:设置第一行的背景色和文本颜色。【最左列】:用于设置表格左侧第1列的各项属性参数。有2个选项:【对齐】、【文字样式】。设置方法同上。【边框】:用于设置表格的边框宽度,以像素为单位。【将所有属性套用至TD标注而不是TR标签】:在HTML标签中,“表示表格的行”,“表示数据单元格”。若要将上述设置用于而不是,则勾选该选项。单击【确定】按钮,完
14、成表格的格式化设置。,挠翅神她枣矾鹰配闹玖腹茹充簇娘滓表杏檀胡常括樱盖蕾厕宗几掌区瞳搂第3章 表格的使用第3章 表格的使用,3.2.6 创建细线表格,若设置表格边框为“1”,则在浏览器中呈示的线条实际为2像素,要制作细线表格,可以使用CSS样式表来定义,也可以运用表格的属性参数来进行设置。我们先介绍后一种方法,具体步骤如下:在Dreamweaver中按Ctrl+Alt+T,弹出插入表格的对话框,参数设置如图3-9所示。为固定值:表格边框设为“0”,间距设为“1”。,蛙穿骸谆记共矣穴你扶慰婆谜瓤瓤庚评礁袁杜乳阶凯颗菩粒哉蝗叉肉苦漱第3章 表格的使用第3章 表格的使用,3.2.7 表格的其他操作,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 表格 使用
链接地址:https://www.31ppt.com/p-4723796.html