第3章 使用表格1 表格的创建课件

学习目标 能够插入表格，会使用属性面板和菜单对表格进行设定和编辑 能够运用表格及表格的嵌套和叠加进行网页布局 能够对表格数据进行处理 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 最终效果如图所示。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 1）新建文件夹duizhen，在该文件夹中新建子文件夹image，将素材拷贝到该文件夹中。利用站点设置对象向导新建站点，将站点文件夹定义为“duizhen”。 2）新建网页，保存为index.html，将网页的标题改为“2018世界杯四分之一决赛对阵”。 3）单击菜单命令“插入”→“表格”，在弹出的对话框中设置表格为6行5列，表格宽度为578像素，单元格间距为1，其他参数为0，如图3-2所示，单击“确定”按钮，则在网页中新建一个表格。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 4）选中表格，在属性面板中设“Align”为“居中对齐”。 5）切换到代码视图，将光标移到字符“<table”后面按空格键，在出现的属性下拉列表中双击“bgcolor”属性。系统会自动添加背景颜色bgcolor属性，输入颜色值为#c9def3。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 6）切回到设计视图，会发现整个表格的背景色为浅蓝色。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 7）拖拽鼠标从表格第1行到最后一行，框选选中所有单元格，在属性面板中设“高”为25，“水平”和“垂直”均设为居中。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 8）拖拽鼠标选中第1行所有单元格，在属性面板中设“背景颜色”为#efefef，则该行单元格变为浅灰色。拖拽鼠标选中该行第2个到右端的多个单元格，在属性面板中单击合并单元格按钮 ，设单元格“水平”为右对齐。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 9）将光标移到第1行左侧单元格内，输入文字“四分之一决赛对阵”。选中文字，在CSS属性面板中设设字号为12，文字颜色为#FF6600。在HTML属性面板单击粗体按钮 加粗文字。将光标移到该行右侧单元格中，分别插入8个国旗图像。此时插入的图片挤在一起，分别将光标移到图片之间按CTRL+SHIFT+空格键插入空隙。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 10）鼠标框选任意一行单元格，在属性面板中设“宽”为20%，则单元格的宽度保持一致。 11）选中第2行单元格，在属性面板中设定背景颜色为#3771b0，则该行变为深蓝色背景。按住Ctrl键分别点击第3、5行的单元格，全部选中它们，设定这2行单元格的背景颜色为白色。同理再分别选中第4、6行单元格，设定这2行单元格的背景颜色为#ecf4ff。 3.1 第3章 使用表格布局页面 3.1.1 案例制作：2018世界杯四分之一决赛对阵表 3.1　表格的建立和编辑 12）在相应的单元格中输入文字。分别选中第2行单元格中的文字，在CSS属性面板中，设字号为12，文字颜色为白色。在HTML属性面板中单击粗体按钮 加粗文字。选中第3～8行的文字，在CSS属性面板中，设字号为12，文字颜色为黑色。在HTML属性面板中单击粗体按钮 加粗文字。将鼠标移到单元格的垂直边框上拖动边框调整各列单元格的宽度如图。 13）按F12进行预览。 3.1 第3章 使用表格布局页面 3.1.2 新知解析 3.1　表格的建立和编辑 1.创建表格 创建表格可以通过“插入”面板或菜单两种方法实现，步骤如下。 1）将光标移到要插入表格的位置 2）在窗口右侧的“插入”面板中，切换到“常用”选项下，单击表格按钮 ，或单击菜单命令“插入”→“表格”，弹出表格对话框，如图所示，可根据需要进行相应的参数设置。 3.1 第3章 使用表格布局页面 3.1.2 新知解析 3.1　表格的建立和编辑 1.创建表格 “表格宽度”的单位可以是百分比或像素。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。 “边框粗细”设定表格边框的宽度，单位为像素。 “单元格