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