第5章 表格——(网页设计与制作共11章)

《第5章 表格——(网页设计与制作共11章)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章表格5.1案例1制作个人履历表5.2表格标签及标签检查器5.3案例2使用表格设计网页5.4实训——使用表格设计“礼品店”主页5.1案例1制作个人履历表5.1.1在页面中创建表格5.1.2表格的基本操作5.1.3设置表格属性5.1.1在页面中创建表格表格由三个基本组件构成：行、列、单元格。表格横向叫行，纵向叫列，行列交叉的区域为单元格，如图5-2所示。一般以单元格为单位来插入网页元素，以行和列为单位来修改性质相同的单元格。首先创建“个人履历表”，操作步骤如下：1）在本地站点新建网页或打开指定的网页。2）将网页标题设置为“

2、表格的应用”。3）确定表格插入点的位置，进行下列操作之一，弹出“表格”对话框，如图5-3所示。选择“插入→表格”菜单命令。从“插入”面板中单击表格按钮，或者将其拖动到页面的插入点。按下〈Ctrl+Alt+T〉组合键。行列单元格图5-2表格的基本组成图5-3“表格”对话框“表格”对话框中各项含义如下：“表格大小”部分：行数：指定表格的行数。列数：指定表格的列数。表格宽度：指定以像素为单位或按占浏览器窗口“百分比”的表格宽度。边框粗细：指定表格边框的宽度（以像素为单位）。若希望浏览器不显示边框，可将其值设置为0像素。单元格边距：

3、指定单元格内容与单元格边框之间的距离，单位是像素。单元格间距：指定相邻的单元格之间的距离，单位是像素。“标题”部分：无：对表格不启用列或行标题。左：将表格的第一列作为标题列。顶部：将表格的第一行作为标题行。两者：能够在表格中输入列标题和行标题。“辅助功能”部分：标题：提供一个显示在表格外的表格标题。摘要：给出对表格的说明文本。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。4）本例在“表格”对话框中，指定“行数”为14行，“列数”为8列，“表格宽度”为90%，“边框粗细”为2像素，“标题”内容为“个人履历表”

4、，其它为默认值。单击【确定】按钮，创建了一个14行8列的表格，如图5-4所示。图5-4插入的表格5.1.2表格的基本操作创建表格后，根据需要常常对表格进行相应的操作，如选择表格或单元格、合并或拆分单元格、添加或删除行和列等。选中表格或表格元素是对表格进行操作的基础。用鼠标单击某个单元格即可将其选中，若选择多个单元格，可使用下面提供的方法来完成：选择整行单元格：将鼠标移到行的最左边，当光标变成一个向右箭头时，单击即可选中整行单元格。选择整列单元格：将鼠标移到列的最上边，当光标变成一个向下箭头时，单击即可选中整列单元格。选择连续

5、的多个单元格：在需要选择的单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖曳，被拖到的单元格出现黑色边框，表示它们被选中。选择不连续的多个单元格：按住〈Ctrl〉键的同时，单击任意个不相邻的单元格，可以选中不相邻的多个单元格。选择表格的所有单元格：在第1个单元格中单击鼠标，按住鼠标左键不放，向右下角最后一个单元格拖曳，直到所有单元格已全部被选中。下面对创建的“个人履历表”进行操作，具体操作如下：1）插入行。为“个人履历表”插入3行。将光标置于某一行的单元格中，执行下列操作之一完成插入行的操作。选择“修改→表格

6、→插入行”菜单命令，即在插入点的下面出现一行。选择“插入→表格对象→在上面插入行”菜单命令，在插入点的上面插入一行。选择“插入→表格对象→在下面插入行”菜单命令，在插入点的下面插入一行。按下〈Ctrl+M〉组合键，在插入点的下面插入一行。选择“修改→表格→插入行或列”命令，弹出“插入行或列”对话框，根据需要设置对话框，可实现在当前行的上面或下面插入多行。提示：插入列操作与插入行操作的方法一样。除了以上方法外，插入列操作还有一种更简便的方法：单击列最下方的绿色小三角按钮，在弹出的下拉菜单中选择“插入列”命令。2）删除列操作。

7、从“个人履历表”中删除最右边的一列。执行下列操作之一完成操作：选中要删除的列或者将光标置于该列中的一个单元格中，选择“修改→表格→删除列”菜单命令。选中要删除的列，选择“编辑→清除”菜单命令或按下〈Delete〉键。将光标置于被删除列中的一个单元格中，按下〈Ctrl+Shift+-〉组合键。提示：删除行操作与删除列操作的方法相似。但是，删除行操作使用的是〈Ctrl+Shift+M〉组合键。3）合并、拆分单元格。选中需要合并的多个单元格，选择“修改→表格→合并单元格”命令将选中的多个单元格合并为一个单元格。选中需要拆分的单元

8、格，选择“修改→表格→拆分单元格”命令，打开“拆分单元格”对话框。选择把单元格拆分为行还是列，并输入拆分的行数或列数，然后单击【确定】按钮。4）调整列的宽度。执行以下操作之一调整列宽。将鼠标指针移到要调整列的右边框，当鼠标指针变为双向箭头时，向左右拖动边框线，可使列的宽度缩小或增大。选中要