表格嵌套技巧网站制作基础

本节继续以在“LM的站点”中制作一个“个人简历”的主题网页为例，介绍表格以及嵌套表格的使用方法。在制作该主题前，需要创建一个名字为person.html的空白网页，具体步骤如下。

步骤1　使用鼠标右键单击“MyWebsite”站点列表项的根文件夹，选择弹出快捷菜单中的【新建文件】命令，将“untitled.html”默认的文件名改为“person.html”，按回车键确认修改。

步骤2　将光标移到网页的第一行处，点击【插入】菜单的【表格】命令，弹出【表格】对话框，如图2-5-8所示。

步骤3　在【表格】对话框中的“行数”“列数”和“表格宽度”输入框中分别输入“2，8，995”，“边框粗细”“单元格边距”和“单元格间距”输入框中输入“0，0，0”，单击【确定】按钮，完成表格的插入，如图2-5-9所示。

图2-5-8　插入表格命令

图2-5-9　【表格】对话框

步骤4　选中表格，然后选择下方【属性】面板中“对齐”下拉列表中的“居中对齐”项，这使表格始终处于页面居中对齐的位置，如图2-5-10所示。

图2-5-10　表格【属性】面板

步骤6　将光标移到第1行的前面，点击【插入】菜单中的【媒体】中的“flash”命令，将网页的“banner.swf”动画插入到表格的第一行。

步骤7　在第2行的单元格中输入相应的文字后，设置单元格【属性】面板中“高度”“水平”“背景颜色”和“文本颜色”属性值分别为“33，居中对齐，#39B6DE，#FFFFFF”，如图2-5-11所示。

图2-5-11　单元格【属性】面板

步骤8　将光标移到第一个表格段落末尾，然后插入第二个表格，在弹出的【表格】对话框中，输入行数为“7”，列数为“5”，边框粗细为“1”，其他属性和上个表格一致，单击【确定】按钮，插入第二个表格完成。

步骤9　设置表格的【属性】面板，将表格布局成为如图2-5-12所示。

图2-5-12　设置表格属性

提示说明：设置每行的高度为“33”，分别将第1行和第2行横行合并，设置第2行的背景颜色值为“#39B6DE”（代表蓝色），设置另外两列的背景颜色值为“#CCCCCC”（代表灰色），将右方的5个单元格合并为一个单元格，用于放置个人相片区域。

图2-5-13　预览效果

步骤11　鼠标右键单击“所学专业”所在的行的任意单元格，在弹出的快捷键菜单中选择【表格】的【插入行或列】命令，如图2-5-14所示。

图2-5-14　【表格插入行或列】命令

步骤12　在弹出的【插入行或列】对话框中“插入”项选择“行”，“行数”项输入“4”，“位置”项选择“所选之下”，点击【确定】按钮，完成在表格中添加行操作，如图2-5-15所示。

图2-5-15　添加行参数

提示说明：【插入行或列】对话框中“位置”项的“所选之上”和“所选之下”属性，表示以当前鼠标所选中的行或列为基准，依次添加行或列。

步骤13　在添加的行中输入相关文字并设置背景颜色，如图2-5-16所示。

图2-5-16　输入内容

步骤14　将光标移到工作经历的下行内闪烁，然后点击【插入】菜单的【表格】命令，在弹出的【表格】对话框中输入行数值“4”；列数值“4”；“表格宽度”值输入“100”，单位为“百分比”；“边框粗细”、“单元格边距”和“单元格间距”值都为“0”，如图2-5-17所示。(www.xing528.com)

图2-5-17　表格内嵌套表格

提示说明：在图2-5-17所示的【表格】对话框中设置表格宽度，可以使用百分比和像素两种单位，其中像素表示像素大小赋值，而百分比表示按照百分比例来赋值。

图2-5-18　预览效果

本节介绍了表格标记，读者可以按照下面的要求完善个人简历网页：

1.使用表格的行和列来存放个人简历的数据内容。

2.对表格的属性进行设置，将数据进行合理的区分和有效的布局。

3.在表格中嵌套表格，实现内容的有效分隔。