创建HTML5网页中的表格与表单PowerPointdesign

01表格CONTENTS目录表单0201

表格Part01

（1）新建一个记事本文档，在文档中输入代码。（2）将代码保存为HTML文件，可以看到，创建了一个简单的3行4列的表格。（3）在表格的单元格中输入文字。（4）将代码保存为HTML文件，可以看到单元格中已经输入了文字。课堂案例——创建网页中的表格

表格标题的位置可由align属性来设置，其位置有表格上方和表格下方之分，下面就是表格标题位置的设置格式。设置标题位于表格上方：captionalign=top.../caption设置标题位于表格下方：captionalign=bottom.../caption1．设置标题位于表格上方表格的标题2．设置标题位于表格下方

一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列基本语法。tablewidth=n1height=n2width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。例如，一个高为600像素、宽为500像素的表格用代码表示为tablewidth=500height=600；一个宽为屏幕的20%、高为屏幕的10%的表格用代码表示为tablewidth=20%height=10%表格的尺寸

表格边框的设置是用border属性来体现的，它表示表格的边框边厚度和边框线。将border设成不同的值，则会有不同的效果。表格的边框尺寸

格与格之间的线为格间线，也称为表格的间距，它的宽度可以使用table中的cellspacing属性加以调节。表格的间距调整

在Dreamweaver中，规定内容与格线之间的宽度称为“填充”，可以用table中的cellpadding属性进行设置。表格内容与格线之间的宽度

表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以align属性来设置，上下排列则由valign属性来设置。其中左右排列的位置可分为3种，分别是“居左（left）”、“居右（right）”和“居中（center）”；而上下排列比较常用的有4种，分别是“上齐（top）”、“居中（middle）”、“下齐（bottom）”和基线“（baseline）”。1．左右排列表格内数据的布局对齐2．上下排列

要创建跨多行、多列的单元格，只需在th标签或td标签中加入rowspan或colspan属性即可，这两个属性值分别表明了单元格要跨越的行数或列数。1．跨多列的单元格跨多行、多列的单元格2．跨多行的单元格

表单Part02

（1）新建一个记事本文档，输入代码，form/form标签表示插入表单。（2）在form/form标签之间输入代码，表示在表单中插入一个8行1列，宽为500像素的表格。（3）在表格第一行单元格中插入一幅图像。（4）在表格的2-8行单元格中分别输入文字和插入表单。（5）将以上代码保存为HTML文件，打开网页，效果如图。课堂案例——制作在线调查表

使用表单能收集网站访问者的信息，比如会员注册信息、意见反馈等。表单的使用需要两个条件，一是描述表单的HTML源代码；二是用于处理用户在表单中输入的信息的服务器端应用程序客户端脚本，如ASP、CGI等。一个表单由两部分组成，即表单域和表单对象，如图所示。表单域包含处理数据所用的CGI程序的URL以及数据提交到服务器的方法；表单对象包括文本域、密码域、单选按钮、复选框、弹出式菜单以及按钮等对象。表单概述表单对象表单域

文本域通过inputtype=text标签来设定，当用户要在表单中输入字母、数字等内容时，就会用到文本域。文本域

密码域通过标签inputtype=password来定义。密码域

inputtype=radio标签定义了表单单选框选项，单选按钮允许用户在有限数量的选项中选择其中之一。单选按钮

inputtype=checkbox定义了复选框.用户需要从若干给定的选择中选取一个或若干选项。复选框

01表单按钮用于控制表单操作，使用表单按钮可以将输入表单的数据提交到服务器，或者重置该表单。表单按钮021.提交按钮inputtype=submit定义了提交按钮。当用户单击提交按钮时，表单的内容会被传送到另一个文件。2.重置按钮inputtype=reset定义了重置按钮。当用户单击重置按钮时，输入表单的内容不会提交。

第1步：新建一个记事本文档，在文档中输入代码，表示插入1行2列，宽为630像素的表格。第2步：接下来分别在两个单元格中插入图像。第3步：将代码保存为HTML文件，打开网页。练习案例——制作导航栏

本练习