第12讲静态网页-表格.doc.docVIP

第12讲 静态网页-表格 一、复习 例1 代码如下： html head title成绩管理系统PHP版/title link href=css/styleProf.css rel=stylesheet type=text/css /head body table border=1 trtd img src=images/piantou2ding.jpg border=0 hr color=red size=1 /td/tr tr height=450tdnbsp;/td/tr trtd style=text-align:center; img src=images/bottom.gif border=0 /td/tr /table /body /html 从上代码中我们可以得到： 网页的框架：htmlhead.../headbody.../body/html 水平线hr color=red size=1 显示图像img src=images/文件名 border=0 调用样式文件link href=css/styleProf.css rel=stylesheet type=text/css 在css文件夹建立样式文件 body { background-image:url(../images/bj.gif); background-repeat:repeat; background-attachment:fixed; } 制作表格tabletrtd.../td/tr..../table 文字样式h1 style=color:red;text-align:center;好/h1 一、简单表格 例1 制作图12-1所示的网页 图12-1 login2_1.htm效果 开始-所有程序-附件-记事本，键入图12-2所示的代码，另为存：选择wamp\www目录，保存方式：所有文件(*.*)，文件名为login2_1.htm。 图12-2 login2_1.htm代码 Login2_1.htm之link href=css/styleProf.css rel=stylesheet type=text/css 设置网页的背景即水印。 table的中文为表格，图12-2中方框内的table..../table称为表格标记，因为它才在浏览器中出现一张表格。 图12-1中有2行，源码中与之对应的标志为tr.../tr。tr为英文table row即表格行的缩写。一张表格拥有的行数不限，但超过的表格浏览器可能无法处理。 每对tr.../tr中有td.../td，它是table data即表格数据的缩写，表示表格中的各个格子，称为“单元格”，td.../td单元格标志。 所有显示在表格中的内容都要写在一对td.../td中，图12-1中的首行放了一幅图，下行也放了一幅图，除此可以放置汉字、字母、数字等其他内容。 代码中img src=images/piantou2ding.jpg border=0是图像标志，该图像位于login2_1.htm所在目录的下级目录images中，因为login2_1.htm所在目录为wamp\www，故图像piantou2ding.jpg在wamp\www\images。 一般情况下一个网站或一个系统所涉及到的图形图像都放在images目录中。 为加快显示速度，图像一般为尺寸较小的格式，如jpg、gif、png，具体尺寸一般在10kb以下，对于尺寸较大的图一般需要准备一张10kb以下的“缩略图”，即与原图大体相似但是尺寸在10kb以下，用户如果需要原图则进行相关的操作。 代码中align=center，style=text-align:center，已经在前面的例题中出现过，称为“属性(attribute)”，“center”意为“中间”，表示单元格的内容左右居中，图12-1第二行的开发者单位的图像左右居中了。 如果图像已经将整个单元格铺满了，如图12-1的首行，则不必居中。 图12-1中无论屏幕有多宽，表格总在左边，多少有点不妥，因此将图12-2中login2_1htm中table border=1换成table border=1 align=center，你会发现表格会随着网页所在窗口的缩放而自动居中，如图12-3所示。 图12-3 login2_1.htm中表格左右居中 图12-3中的表格其宽度是固定的，它与单元格图像images/piantou2ding.jpg的宽度一致，如果希望它随所在窗口的宽度而按比例变化，将刚才修改后的table border=1 align=center再换成table border=1 align=center width=90%，你不断调整表格所在窗体的宽度，表