第4讲表格-上海财经大学PPT课件.ppt

《Web应用开发》 上海财经大学信息管理与工程学院 第四讲：表格 电子商务网站开发 第*页 本讲主要内容 表格的创建与修改 利用表格进行页面布局 标准视图与布局视图 第*页 4.1.1 创建表格 STEP1. 单击下图所示的“插入”面板“布局”选项卡中的“标准视图”按钮，切换到标准视图方式。 切换到标准视图 插入表格图标 第*页 STEP2. 将光标移至要插入表格的位置，选择“插入”菜单的“表格”命令或单击“插入”面板“布局”选项卡上的“插入表格”图标，弹出以下所示的“插入表格”对话框。 一个格子内部文字与边框之间的距离 表格内格子与格子之间的距离 表格宽度的度量单位：像素或％ 第*页 4.1.2 表格的选择 选择单元格 多个连续的单元格：在单元格上单击，拖曳鼠标，直至选中所有要选择的单元格 多个不连续的单元格：按住Ctrl键，单击要选择的单元格。 选择行 单行：把鼠标指针移至要选择行的左边框，当鼠标指针变成水平箭头后单击。 多个连续的行：先选中要选择的第一行，再拖曳鼠标，直到选中所有要选择的行。 多个不连续的行：按住Ctrl键，单击要选择行的左边框。 选择列：与选择行类似 选择整个表格 单埚表格内的任意单元格，再选择“修改”菜单的“表格”/“选择表格”命令。 第*页 4.1.3 行（或列）的插入与删除 STEP1. 选中要插入行的单元格，单击“修改”菜单中的“表格”/“插入行”命令。弹出下面的对话框。 STEP2. 单击“行”单选钮，在“行数”项中输入相应的数值，在“位置”项中选择合适的选项，然后，单击“确定”按钮，完成插入操作。 第*页 删除行（或列） （1） 选中要删除的行（或列） （2）单击“修改”菜单的“表格”/“删除行”或“删除列”命令。 第*页 4.1.4 单元格的拆分与合并 拆分STEP. 选择要拆分的单元格，单击“修改”菜单中的“表格”/“拆分单元格”命令。如下图所示 合并STEP. 选择要合并的若干个连续的单元格，单击“修改”菜单中的“表格”/“合并单元格”命令。即可完成单元格的合并 第*页 4.1.5 设置表格的大小和行高、列宽 设置表格的大小 选中整个表格 在“属性”面板的“宽”（或“高”）项中输入表格的宽度（或高度），并在右侧的列表中选择“像素”或“百分比”作为表格宽度（或高度）的单位。 或，在选中表格后直接拖动出现在表格边框处的三个黑色控点，以调整表格的大小。 第*页 设置行高和列宽 选中要修改行高的行（或要修改列宽的列） 在“属性”面板的“宽”（或“高”）项中输入相应的宽度（或高度），并在右侧的列表中选择“像素”或“百分比”作为宽度（或高度）的单位。 或者直接用鼠标拖动表格行或列的边框来改变行高和列宽。 第*页 4.1.6 修改单元格和表格的属性 表格属性 必须先选中表格，然后可以在“属性”面板中设置其属性 第*页 单元格属性 选中单元格，然后可以在“属性”面板中设置其属性 第*页 4.1.7 表格嵌套 表格的嵌套会使表格变得过于复杂，若能用单元格拆分的方法解决问题的话，尽量不要用表格的嵌套操作。但有时单元格的拆分操作无法代替表格的嵌套操作。 第*页 4.2 利用表格进行页面布局 表格的特点使得它用来进行页面布局非常好 表格布局实例操作 上海财经大学班级主页的制作 上海财经大学学生信息网页面的制作 第*页 4.3 在布局视图中绘制表格 什么是布局视图 在布局视图下进行网页设计不用考虑表格设计时的细节（如表格应定义成几行几列，应怎么拆分与合并），而将以网页的内容为导向进行网页的布局。 布局视图的使用 点击此按钮进入布局视图 绘制而已表格图标 绘制布局单元格图标 第*页 4.4 布局视图应注意的若干问题 须先利用“绘制布局表格”按钮在网页上先创建一个表格，然后利用“绘制布局单元格”按钮在表格内部创建单元格。 网页内容只能添加在单元格内 在表格内部空白的区域（即没有单元格的地方）可利用“绘制布局表格”按钮绘制表格，这样就形成了表格的嵌套。 实例练习（以班级主页为例） 《Web应用开发》