5.5 实战——制作圆角表格

先把这个圆角做成图像，然后插入到表格中。下面通过实例讲述创建圆角表格，效果如图5-38所示，具体操作步骤如下。

图5-38 创建圆角表格效果

原始文件：原始文件/05/实战/index.html
最终文件：最终文件/05/实战/index1.html

步骤01 打开网页文档，将光标置于页面中，如图5-39所示。

图5-39 打开网页文档

步骤02 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为3，“列”设置为1，如图5-40所示。

图5-40 “表格”对话框

步骤03 单击“确定”按钮，插入表格，此表格记为表格1，如图5-41所示。

图5-41 插入表格

步骤04 将光标置于表格1的第1行单元格中，打开“属性”面板，在面板中单击“拆分单元格为列或行”按钮，如图5-42所示。

图5-42 单击“拆分单元格为列或行”按钮

步骤05 弹出“拆分单元格”对话框，在对话框中“把单元格拆分”设置为“列”，“列数”设置为2，如图5-43所示。

图5-43 “拆分单元格”对话框

步骤06 单击“确定”按钮，将单元格拆分为2列，如图5-44所示。

图5-44 拆分单元格

步骤07 将光标置于表格1的第1列单元格中，执行“插入”|“图像”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像文件d1-1.jpg，如图5-45所示。

图5-45 “选择图像源文件”对话框

步骤08 单击“确定”按钮，插入圆角图像，如图5-46所示。

图5-46 插入圆角图像

步骤09 将光标置于表格的第1行第2列单元格中，打开代码视图，在代码中输入背景图像background=images/mail_16.jpg，如图5-47所示。

图5-47 输入代码

步骤10 返回设计视图，可以看到插入的背景图像，如图5-48所示。

图5-48 插入背景图像

步骤11 将光标置于背景图像上，输入相应的文字，如图5-49所示。

图5-49 输入文字

步骤12 将光标置于表格的第2行单元格中，打开代码视图，在代码中输入背景图像代码background="images/main_32.jpg"，如图5-50所示。

图5-50 输入代码

步骤13 返回设计视图，可以看到插入的背景图像，如图5-51所示。

图5-51 插入背景图像

步骤14 将光标置于背景图像上，执行“插入”|“表格”命令，插入1行1列的表格，如图5-52所示。

图5-52 插入表格

步骤15 将光标置于刚插入的表格中，输入相应的文字，如图5-53所示。

图5-53 输入文字

步骤16 将光标置于要插入图像的位置，执行“插入”|“图像”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择相应的图像文件about2.jpg，如图5-54所示。

图5-54 “选择图像源文件”对话框

步骤17 单击“确定”按钮，插入图像，如图5-55所示。

图5-55 插入图像

步骤18 将光标置于表格的第3行单元格中，执行“插入”|“图像”|“图像”命令，插入圆角图像，如图5-56所示。

图5-56 插入圆角图像

步骤19 保存文档，按F12键在浏览器中预览，效果如图5-38所示。