【精选】第4章实验指导.ppt

HTML实验指导书第4章：任务 任务4-1 建立表格并通过table元素的属性 任务描述 在网页中建立一个3列5行的标准表格，并给表格加上标题文字。设置该表格总体的属性 基本概念与原理 建立表格需要五个元素的配合使用，分别是： table元素表明表格的开始和结束； th元素表明表格题头； tr元素定义表格中的一行; td元素定义表格的数据(单元格)。 caption元素包含在table元素中可以控制表格的标题文字 Table元素出现在表格的最外层，其他几个元素嵌套在talbe元素中。Table元素的属性用来控制表格的总体外观，如：边框(内、外)的大小boder,cellspacing、表格文字与边框的空白cellspadding、表格与表格外内容的距离、表格的高度height和宽度width、背景颜色bgcolor、边框的颜色bordercolor、表格的对齐方式align 任务4-1 建立表格并通过table元素的属性 参考代码 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head meta http-equiv=Content-Type content=text/html; charset=gb2312 title任务4-1/title /head body table width=75% border=20 align=center cellpadding=5 cellspacing=12 bgcolor=#CCCCCC caption align=top学生情况表/caption tr td 姓名/td td 性别/td td 班级/td /tr tr 任务4-1 建立表格并通过table元素的属性 接上页 td令狐冲/td td男/td td98会计/td /tr tr td郭静/td td男/td td98会计/td /tr tr td任莹莹/td td女 /td td98会计/td /tr tr td岳不群/td td男/td td98会计/td /tr /table /body /html 任务4-1 建立表格并通过table元素的属性 caption元素必须包含在table元素中(否则浏览器会错误显示)，设置属性align=”bottom”,可以将标题放在表的下方。相关代码如下。 …… table width=75% border=20 align=center cellpadding=5 cellspacing=12 bgcolor=#CCCCCC caption align=top学生情况表/caption …… 思考 问： 在预览结果时，改变浏览器的窗口，会发现表格的宽度随之拉伸。能否设置为固定的呢，该如何做？ 答： 只要将该属性值的单位定为像素即可。（另外设置表格的高度也遵循同样的规律） 讨论 请修改填充、间距、边框的值观看效果，理解这三个属性各自的作用？ 学生练习4-1-1：建立表格 任务描述 按照实验环境目录..\HTML-05\04\example1.htm给出的样式设计相关网页。将结果以htm文件保存在式样环境目录中。Hidein.htm包含一个原始表格,你可以从它开始 学生练习4-1-1：建立表格 基本概念与原理 隐藏分隔线的诀窍在于table元素的rules属性，它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框，而不影晌单元格只显示上边框 table frame=above只显示下边框 table frame=below 只显示左、右边框 table frame=vsides只显示上、下边框 table frame=hsides只显示左边框 table frame=lhs只显示右边框 table frame=rhs不显示任何边框 table frame=void 任务4-2 建立不规则的表格 任务描述 使用table、th、td、tr等元素的属性建立一些较复杂的表格，通过此任务学习这些元素的属性功能 任务4-2 建立不规则的表格 基本概念与原理 tr表格行元素的属性有： height 控制表格内某行的高