网页设计之第5讲 表格与表单

《网页设计之第5讲 表格与表单》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5讲表格与表单【本讲导读】本讲主要介绍了网页制作的表格和表单的基本知识，熟悉表格的基本操作，以及表单的设计。【本讲要点】表格的基本操作表单的设计5.1表格的基本操作5.1.1创建表格5.1.2单元格的拆分与合并5.1.3行与列的添加与删除5.1.1创建表格创建表格的具体步骤如下：（1）选择菜单命令【插入】表格】，会自动打开【表格】对话框。（2）在上图中设置表格的行数与列数，默认为3行3列。（3）设置表格的宽度。可为百分比或者像素，在此设为100％，这样无论当前的窗口有多大，表格始终可以充满整个页面。5.1.1

2、创建表格（4）在【边框粗细】文本框中设置表格边框的粗细。在此设置为0，数值越大，边框就越粗。（5）设置单元格边距和间距，在此设为1。（6）设置页眉，即为表格的对齐方式，有无、左、顶部、两者共四种选择，在此选择默认。实际操作时可根据需要选择合适的方式。（5）此外，还有辅助功能区，可根据需要进行设置，也可留空。（8）单击【确定】按钮，在当前文档中，插入了一个3行3列，宽度为100%的表格。5.1.2单元格的拆分与合并表格中行与列围成的区域称为单元格，在单元格中可以插入文本、图像等元素，也可以根据实际的需要对单元格进

3、行合并和拆分，具体的步骤如下：（1）将单元格拆分成行或列，行数中可以输定数字，显示拆分的数量。将光标放在刚插入的表格第一行，单击【属性】面板中的“拆分单元格”按钮，会弹出【拆分单元格】对话框。5.1.2单元格的拆分与合并（2）在对话框中将【单元格拆分】后的“列”单选按钮选中，在【列数】文本框中输入2，单击【确定】按钮，就可以把表格的第一行拆分成2列，变成2个单元格。（3）选中刚才拆分的2个单元格，此时在属性面板中，单击【合并单元格】按钮，则2列单元格又会合并成1个。5.1.3行与列的添加与删除对行与列进行添加与

4、删除的操作步骤如下：（1）在新建的表格上分别输入文本。（2）在第四行右击，在弹出的快捷菜单中选择【表格】插入行】命令，此时就会在当前行上方插入一行。（3）在当前的第5行右击，在弹出的快捷菜单中选择【表格》插入行或列】命令。5.1.3行与列的添加与删除（4）打开【插入行或列】对话框，如果选择插入【行】选项，可以设置插入的行在插入点的上或下，如果选项的是插入【列】选项，可以设置插入的列在插入点的前或后。这里仅以对行的操作为例，选择在所选位置之前插入2行。（5）单击【确定】按钮，此时表格变成了5行。（6）将光标置于要

5、删除行的任意一个单元格中，右键选择【表格》删除行】命令或者按下Delete键，可将该行删除。5.2设置单元格属性单元格作为表格的重要的组成部分，其属性的设置影响到表格的外观，将鼠标放到某个单元格内，可以通过【属性】面板对这个单元格进行设置。在属性面板中，各参数的含义如下：（1）水平对齐：有默认、左对齐、居中对齐、右对齐4种对齐方式。默认的对齐方式是左对齐，设置后的三种效果。（2）垂直对齐：有默认、顶端、底部、基线4种方式，默认的对齐方式是居中，设置后的三种效果。5.2设置单元格属性（3）在【属性】面板中宽和高的

6、文本框中输入数值，可以设置单元格的高度和宽度，此数值的单位可为像素(px)或者百分比(%)（4）单元格中设置背景图片，单击背景后的按钮，在弹出的【选择图像源文件】对话框中选择背景图像，然后单击【确定】按钮，完成背景图像的设置。（5）设置背景色，单击背景颜色后的按钮，可以对选中的单元格背景颜色进行设置。（6）设置单元格边框颜色，单击边框颜色后的按钮，可以对所选单元格的边框颜色进行设置。5.3设置表格属性5.3.1表格的边框属性5.3.2表格的背景属性5.3.3表格的对齐属性5.3.4表格的填充与间距5.3.5表格

7、的嵌套5.3.1表格的边框属性边框属性有2个：大小和颜色，边框的大小属性用于设置边框的宽度，在【属性】面板中“边框”选项中设置其宽度，可以设置为0或其他数值。只有在其数值大于0时，边框才可以在浏览器中可见。表格边框在网页设计过程中经常用到，有时会根据需要设置成一定的数值，以像素为单位。边框的颜色是为了美化表格和网页而设置的，可以在“边框颜色”选项中直接输入颜色值，或单击“边框颜色”后的按钮，出现颜色选择器，或采用自定义颜色适配器，进行边框颜色的设置，而且边框颜色只有在表格的宽度大于0时才有效。5.3.2表格的背

8、景属性表格的背景可以使用颜色填充也可以使用图片填充。使用背景色填充表格的步骤如下：选中表格，在【属性】面板中的背景颜色后面的文本框中输入颜色值，或者在颜色选择框中选择背景颜色。设置背景颜色的表格在浏览器中的显示效果。5.3.2表格的背景属性使用背景图片填充表格的步骤如下：（1）选中表格，打开【属性】面板，在背景后面的文本框中输入表格背景图像的路径和名称，或者单击【文件夹】按钮，打开【选