制作表格网页.doc

单元四 制作表格网页单元四 制作表格网页学习目标 学习制作表格网页有关的常用标记符的用法，包括在网页中创建基本表格以及相对比较复杂的表格，并对表格及文字对齐方式进行设置，设置表格的色彩及显示样式。通过学习能制作出相对比较复杂的表格，并能对表格进行美化处理。4.1 创建基本表格案例说明利用标记符创建如图4-1的表格图4-1 利用标记符创建表格eg4-1.htm代码(利用标记符创建表格) 学生成绩表制作例子 学生成绩表 学号姓名性别总成绩 1张三男589 2李四女590 3王五男510 代码分析 知识扩展表格中的表头和具体数据可以用进行设置。相关知识表格的组成部分知识点4-1-1表格是由行和列组成的，下图（图4-2）是一个典型的表格，它由标题、表头、表格数据、表格单元格组成。单元格表头标题表格数据图4-2 典型的表格表格标记符的格式知识点4-1-2 1行1列 第一列 1行2列 第二列 行标记（1行） 定1行3列 第三列 义 表2行1列 第一列 格2行2列 第二列 行标记（2行）2行3列 第三列 上述的HTML代码在浏览器中显示的结果如图4-3所示。图4-3 表格标记符的格式. 定义表格 定义表行 定义表头，通常是黑体居中文字。 定义表元(表格的具体数据)表格标记符的一般格式知识点4-1-3表格标记符的一般格式为：表格标题 表头1表头2。表头n 表项11表项12。表项1n 表项m1表项m2。表项mn 表项11表项12。表项1n 表项11表项12。表项1n 表项11表项12。表项1n 表项11表项12。表项1n4.2 创建跨多行、多列表元的表格案例说明将图4-2中有粉红色矩形的单元格进行合并表格栏位，从而实现创建跨多行、多列表元的表格如图4-4所示。图4-4创建跨多行、多列表元的表格eg4-2.htm代码(创建跨多行、多列表元的表格)表格网页的制作 张三 档案卡片 姓名 张三 性别 男 民族 汉 照片 籍贯 江苏 出生年月 1979.10 工作时间 1999 政治面貌 党员 入党时间 1998 工作单位 江苏省* 通信地址 * 简历 * * * * * * * * * * * * * 代码分析上述代码中用到了一个上下合并功能（跨多行的表元合并属性是rowspan）。 照片 上述代码中用到了四个左右合并功能（跨多列的表元合并属性是colspan）。 党员江苏省* *简历 * * 相关知识左右栏位合并知识点4-2-1并非所有的表格都是如4-2规则的表格，有时候，希望能够“合并栏位”，让表格更美观、更实用一点，“合并栏位”的方向有两种，这两种合并方式各有不同的属性设定方法。一种是上下合并（跨多行的表元合并属性是rowspan）。一种是左右合并（跨多列的表元合并属性是colspan）。这两种合并方式各有不同的属性设定方法。 左右栏位合并：将第一行的1、2、3 格通通合并变成一大格（colspan=3）表4-1 左右栏位合并代 码呈现结果14561456colspan=3就是“左右栏位合并”的属性，colspan=3的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个都可以省掉了，因为都被并掉了。 上下栏位合并知识点4-2-2上下栏位合并：将 1、4格通通合并变成一大格（rowspan=2）表4-2上下栏位合并原始码呈现结果 1235612356要“上下合并”，将1与4合并成一个栏位，将删掉4单元格，而在1的标记符中则多了个rowspan，这就是“上下栏位合并”的属性，rowspan=2的意思就是“上下连跨了2个栏位”。4.3 表格中行、列及单元格的修饰eg4-3.htm代码(表格中行、列及单元格的修饰) 学生成绩表制作例子 学生成绩表 学号姓名性别总成绩 1张三男589 2李四女590 3王五男510 案例说明用、和标记符中的属性，对图4-1表格的各行、列及单元格进行修饰。将eg4-1.htm文件修改成如下代码后，存为eg4-3.htm文件，显示效果如图4-5所示。代码分析cellspacing=25cellpadding=20border=10 bordercolor=bluecellspacing=25background=img/background.jpgvalign=topvalign=middlevalign=bottomalign=rightalign=centeralign=left图4-5 表格中行、列及单元格的修饰相关知识、和标记符共有的属性知识点4-3-1(1)色彩属性要设置表格、行或 行中的单元格的颜色，可以在、和标记符里使用bgcolor、bordercolor、bordercolorlight、bordercolordark等颜色属性。这些属性的功能如表4-3所示：表4-3 、和标记符共有的颜色属性属性功能Background设定对象背景图片(没有此属性)bgcolor=设置对象的背景色Bordercolor设置对象边框的颜色Bordercolorlight设置对象边框亮面的颜色(当border的值大于等于1时才有用)Bordercolordark设置对象边框暗面的颜色(当border的值大于等于1时才有用)注:1、标记符没有background属性2、颜色的属性值使用十六进制RGB颜色码或Html语言给定的颜色常量名(如 Silver 为银色)、和标记符共有的颜色属性功能都是一样的，只是对象不同而已，即对不同的对象进行颜色的设置。(2) table、和标记符共有的大小及对齐方式属性要设置表格、行或行中的单元格的大小及对齐方式，可以在、和标记符里使用width、height；align、valign属性，这两个属性的功能如表4-4所示：。align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。等属性。表4-4 、和标记符共有的大小及对齐方式属性属性功能Width设置对象的宽度Height设置对象的高度Align设置对象的水平摆放位置（left、right或center）Valign设置对象的内文字或图像等垂直摆放位置（top、middle、bottom）、和标记符共有的对齐方式属性功能都是一样的，只是对象不同而已，即对不同的对象进行对齐方式的设置。、和标记符各自特有的属性知识点4-3-2、和标记符除了上述的共有有的属性，、和标记符各自有自己特有的属性。(1) 标记符特有的属性表4-5 标记符特有的属性属性功能设置表格边框的宽度，若不设置此属性，则边框宽度默认为0。 设置表格格子之间空间的大小。 设置表格格子边框与其内部内容之间空间的大小。(2) 标记符特有的属性表4-6 标记符特有的属性属性功能colspan设置表格一个单元格跨占的列数(缺省值为1) rowspan设置表格一个单元格跨占的行数(缺省值为1)nowrap禁止表格单元格内的内容自动换行知识扩展在表格的单元格中还可能插入其它标记符，甚至还可以在表格的单元格中插入另一个表格。实现图4-6的代码文件为eg4-tempok.htmeg4-tempok.htm代码(在表格的单元格中插入另一个表格)这是一个段落标记这是另一个段落标记这个单元格包含一个表格:ABCD这个单元格包含一个无序列表applesbananaspineapplesHELLO图4-6在表格的单元格中插入另一个表格4.4 表格中按行分组与按列分组显示案例说明使用表格中按行分组与按列分组标记符显示表格。在浏览器中浏览显示如图4-7所示的网页文件为eg4-4.htm。代码分析表格的上方是表格的标题，表格的第一行是表头，最后一行是表格的脚注行，表格的三行被分成两个表体，第一个表体是前二行，背景色为蓝色；第二个表体是第三行，没有设置背景色，但是前三个单元格的背景是红色，第四个单元格的背景色是绿色，这是因为表格的的前3列为一列组，且背景色为红色，表格的第4列为第二列组，且背景色为绿色（因为属性优先于属性）。eg4-4.htm代码(表格中按行分组与按列分组显示) 学生成绩表 学号姓名性别总成绩 表尾 1张三男589 2李四女590 3王五男510 图4-7表格中按行分组与按列分组显示相关知识表格中按行分组标记符知识点4-4-1表格的行从上到下可以分表头、表体和表尾，分别使用标记、来定义。这种定义方法不仅可以设置表头，而且还可以将表格的行分组。格式为：表格标题表头表尾表体1表体n表头、表尾标记符共有的属性及功能见表4-7所示表4-7表头、表尾标记符共有的属性及功能属性功能bgcolor定义背景色align水平对齐方式（left、center、right）valign垂直对齐方式（top、middle、bottom或baseline）1、表头、表尾、表体都可以包含一般表格的若干行。可以定义多个表体表体部分，但各行的列数必须相同。、的结束标记符都可以省略。在浏览器中显示时，表头、表尾、以及各表体之间都用边框分隔。2、表头必须跟在.、或之后，在可选项表尾和表体之前。3、表尾必须跟在表头之后，在表体之前。表格中按列分组标记符知识点4-4-2表格中用列组标记符和列标记符，可以改变列的一些性质，如列的宽度、对齐方式等。列组的格式如下：列的格式如下：列组和列的共有的属性及功能见表4-8所示表4-8 列组和列的共有的属性及功能属性功能width列宽度bgcolor定义背景色align水平对齐方式（left、center、right）valign垂直对齐方式（top、middle、bottom或baseline）的span的属性n=从左数起，具有指定属性的列组的列数，缺省为1列（如span=4，表示从该列组第1列至第4列共4列）。 的span的属性n=从左数起，具有指定属性的列的列数。如果放在列组中，则span的属性n=从左数起：指的是从该列组的左数起，且表4-6中的属性优先于属性。4.5 控制表格边框和分隔线的显示案例说明利用标记符frame属性控制表格边框的显示样式，在浏览器中浏览显示如图4-8所示的网页文件为eg4-5.htm。图4-8控制表格边框的显示样式代码分析eg4-5.htm代码(控制表格边框的显示样式) 控制表格边框和分隔线的显示 控制表格边框frame=box:显示所有四个边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=above:只显示上边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=below:只显示下边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=hsides:只显示上、下边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=vsides:只显示左、右边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=lhs:只显示左边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=rhs:只显示右边框 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框frame=void:不显示四个边框 1行1列1行2列1行3列 2行1列2行2列2行3列 相关知识控制表格边框的显示知识点4-5-1利用标记符frame可以控制表格边框的显示样式，其格式为：frame的属性及功能见表4-9所示表4-9 中frame的属性及功能属性功能box显示所有四个边框above只显示上边框below只显示下边框hsides只显示上、下边框vsides只显示左、右边框lhs只显示左边框rhs只显示右边框void不显示四个边框控制表格分隔线的显示知识点4-5-2利用标记符rules可以控制表格分隔线的显示样式，其格式为：，rules的属性及功能见表4-10所示表4-10 中rules的属性及功能属性功能all显示所有分隔线groups只显示组与组之间的分隔线rows只显示行与行之间的分隔线cols只显示列与列之间的分隔线none不显示任何分隔线利用标记符rules可以控制表格分隔线的显示样式，在浏览器中浏览显示如图4-9所示的网页文件为eg4-6.htm。eg4-6.htm代码(控制表格分隔线的显示) 控制表格边框和分隔线的显示 控制表格边框rules=all:显示所有分隔线 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框rules=rows:只显示行与行之间的分隔线 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框rules=cols:只显示列与列之间的分隔线 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框rules=none:不显示任何分隔线 1行1列1行2列1行3列 2行1列2行2列2行3列 控制表格边框rules=groups:只显示组与组之间的分隔线 1行1列1行2列1行3列 2行1列2行2列2行3列 3行1列3行2列3行3列 将上述代码另存为eg4-6.htm文件，在浏览器中浏览，显示如图4-9所示：图4-9控制表格分隔线的显示习题四一、基础题(1)请写出在网页中定义表格的开始标记格式_和结束标记符_。(2)请写出在网页中设定表格边框的厚度的属性_；设定表格单元格之间宽度属性_；设定表格资料与单元格线的距离属性_。(3)请写出表格标题功能是_。(4).是用来定义_；.是用来定义_；是用来定义_。(5)单元格垂直合并所用的属性是_；单元格横向合并所用的属