第2章表格、表单和框架终稿.pptx

第2章 表格、表单和框架 内 容 提 要 小结 2.3 框架 2.2 表单 2.1 表格 使用HTML，可以设计更复杂的网页元素，例如表格、表单以及框架等。 表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局。 表单是控件的容器，客户端提交给服务器端的信息通常放置在控件里，是设计网页必不可少的元素。 框架可以将网页内容有效地进行划分，使不同的区域显示不同的内容。 2.1 表格 一个完整的表格由一对table标签来定义。 每个表格均有若干个单元行（由一对tr标签定义）组成。 每个单元行由若干个单元格（由一对td标签定义）组成。 表格内的具体信息放置在单元格中。 单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。 基本语法 table tr th head1/th th head2/th …… /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td …… /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td …… /tr …… /table 例：2-1.HTML 表格标题 表格标题，就是对表格内容的简单说明，用caption标记来定义。 基本语法： caption表格标题/caption 语法解释： caption标记在表格标记范围内，表格标题一般显：示在表格上方，是对表格内容的简略说明。 例：2-2.HTML 划分表格结构 从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用thead、tbody、tfoot标签来表示。 表头和表尾一张表格只能有一个，而一张表格可以有多个主体。 对于大型的表格来说，应该使tfoot出现在tbody的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外，thead、tbody、tfoot标签内部都必须使用tr标签。 与表格相关的元素或标签如表所示。 元素 说明 table 表格的最外层标记，代表一个表格 tr 单元行，由若干单元格横向排列组成 td 单元格，包含表格数据 th 单元格标题，与td作用相似，但一般作为表头行的单元格 thead 表头分组 tfoot 表尾分组 tbody 表格主体分组 colgroup 列分组 caption 表格标题 划分表格结构 使用thead、tobody、tfoot对表格进行结构划分的好处是可以先显示tbody的内容，而不必等整个表格下载完成后才能显示。 无论thead、tbody、tfoot的顺序如何改变，thead的内容总是在表的最前面，tfoot的内容总是在表的最后面。 划分表格结构 thead 元素用于对 HTML 表格中的表头内容进行分组，tfoot 元素用于对 HTML 表格中的总计行（页脚）内容进行分组，tbody 元素用于对 HTML 表格中的数据主体内容进行分组。 基本语法： table thead /thead tfoot /tfoot tbody /tbody /table 例2-3.HTML table标签的常用属性如表所示。 属性 说明 align 设置表格水平对齐方式 bgcolor 设置表格背景色 border 表格的边框的宽度，一般由CSS实现 width 以百分比或像素指定表格的宽度 height 以百分比或像素指定表格的高度 cellspacing 表格中相邻单元格的间距以及单元格外边沿与表格边沿之间的间距，一般由CSS实现 cellpadding 单元格的边沿和它的内容的间距，一般由CSS实现 table标记属性 1．设置表格水平对齐属性 在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。 基本语法： table align=” ” 语法解释： 属性可选的值有left 、center 和right ，代表表格出现在窗口的左侧、中间和右侧位置。 例2-4.HTML table标记属性 2．设置表格背景色属性 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 基本语法： table bgcolor=” ” 语法解释： bgcolor属性规定表格的背景颜色。颜色描述方式为rgb(x,x,x) 、#xxxxxx或colorname 。 例如，如果设置表格背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。设置形式如下。 table bgcolor=rgb(255,0,0) table标记属性 3．设置表格边框宽度属性 默认情况下表格边框为0，可以通过给表格添加border