ACCP V4.0
使用表格和表单第五章
ACCP V4.02
回顾
自动刷新功能应使用哪个 HTML标签？
标签区分大小写吗？
段落标签 <P>和换行标签 <BR>有什么区别？
字符标签 <FONT>有哪些常用属性？
使用图片标签 <IMG>显示图片 q.jpg，如何写 HTML代码?
写 HTML代码时，空格用什么表示？
显示如下所示的列表，如何写 HTML代码：
您认为乔丹的血型是？
A,A型
B,B型
C 以上都不对
显示如下所示的超链接，如何写 HTML代码：
请查看 Microsoft微软中国
ACCP V4.03
用 HTML 代码创建表格
创建表单
使用框架目标
ACCP V4.04
表格行列列标题在 HTML 文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题
ACCP V4.05
<HTML>
<HEAD>
<TITLE>使用表格 </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 >
<TR>
<TD>姓名 </TD>
<TD>性别 </TD>
<TD>分数 </TD>
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD>
<TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
创建表格
<TABLE>代表表格的开始,border=2表示边框尺寸为 2
<TR>表示行，这是表格的第一行，有三列数据,<TD>代表列表格的第 二行，有三列数据表格的第 三行，也有三列数据
ACCP V4.06
<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR>
<TH>姓名 </TH>
<TH>性别 </TH>
<TH>分数 </TH>
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD>
<TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
表格的标题
<CAPTION>表示表格标题
<TH>表示行或列标题，粗体显示表格的第 二行，有三列数据表格的第 三行，有三列数据
ACCP V4.07
<BODY>
<TABLE border=2 align=center>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR>
<TH>姓名 </TH>
<TH align="center">性别 </TH>
<TH align="right">分数 </TH>
</TR>
<TR>
<TD>Robert</TD>
<TD align="center">M</TD>
<TD align="right">80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
表格的对齐方式整个表格居中姓名列默认左对齐性别列居中分数列右对齐
ACCP V4.08
合并单元格 (跨列 )<BODY><TABLE BORDER = 2 ALIGN =
CENTER>
<CAPTION>创建表格 </CAPTION>
<TH COLSPAN = 3>第一学期 </TH>
<TH COLSPAN = 3>第二学期 </TH>
<TR>
<TD>数学 </TD>
<TD>科学 </TD>
<TD>英语 </TD>
<TD>数学 </TD>
<TD>科学 </TD>
<TD>英语 </TD>
<TR>
<TD>98</TD>
<TD>95</TD>
<TD>80</TD>
<TD>95</TD>
<TD>87</TD>
<TD>88</TD>
....
COLSPAN=“n” 属性表示跨多少列
ACCP V4.09
合并单元格 (跨行 )<BODY><TABLE BORDER = 1,align = center>
<CAPTION><b>创建表格
<b></CAPTION>
<TR>
<TH></TH>
<TH></TH>
<TH>螺母 </TH>
<TH>螺栓 </TH>
<TH>锤子 </TH>
<TR>
<TD ROWSPAN = 3>第一季度 </TD>
<TD>一月 </TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>二月 </TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
.....
ROWSPAN=“n” 属性表示跨多少行
ACCP V4.010
<BODY>
<TABLE border=0 align=center width=50%>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR bgcolor="#00FFFF">
<TH align="left">姓名 </TH>
<TH align="center">性别 </TH>
<TH align="right">分数 </TH>
</TR>
<TR bgcolor="#FFFF00">
<TD>Robert</TD>
<TD align="center">M</TD>
<TD align="right">80</TD>
</TR>
<TR bgcolor="#FFFF00">
<TD>Mary</TD>
<TD align="center">F</TD>
<TD align="right">18</TD>
</TR>
</TABLE>
表格的背景色和尺寸设置表格的颜色设置：
表格的背景色 <TABLE bgcolor=颜色值 >
行的背景色 <TR bgcolor=颜色值 >
列的背景色 <TD bgcolor=颜色值 >
颜色值可以采用 RGB（ red/green/blue）红绿蓝十六进制值表示，如红色 #FF0000,
或是一些预定义色彩名称,red,blue,yellow等。
表格的尺寸设置：
<TABLE width=n1 height=n2>
例如：
<TABLE width="200" height="100">
表示一个长为 200像素，宽为 100像素的表格。
<TABLE width=20% height=10%>
表示一个宽为窗口的 20%，高为窗口的 10%的表格。
18
80
分数
F
M
性别
Mary
Robert
姓名学员档案信息
ACCP V4.011
表单输入元素 -7
课堂练习,请编写 HTML代码
ACCP V4.012
表单
ACCP V4.013
METHOD =“post或 get”
表单 <FORM>
ACTION METHOD
指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法,
一般为 post或 get方法,
post方法比较安全
ACTION =,URL”
<FORM action=“http://www.sohu.com” method=“post”>
ACCP V4.014
表单输入元素 -1
Type 此属性指定元素的类型。 元素类型可以有多种选择,TEXT、
PASSWORD,CHECKBOX,RADIO,SUBMIT,RESET,FILE、
HIDDEN 和 BUTTON。 默认选择为 TEXT。
Name 此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1,TEXT2 或选择的任何名称来标识它们。 Name 属性的作用域是在 FORM 元素内。
Value 此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为
RADIO，则必须指定一个值。
Size 此属性指定控件的初始宽度。 如果 TYPE 为 TEXT 或 PASSWORD，
则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为
RADIO 或 CHECKBOX 时，使用此属性。
文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”
value=“?” maxlength=“?” checked=“?”>
ACCP V4.015
表单输入元素 -2
<INPUT name="button1" type="submit" value="提交 ">
<INPUT name="button2" type="reset" value="重置 ">
<INPUT name="button3" type="button" value="普通按钮 ">
BUTTON（按钮）
Type 属性：
submit,提交按钮
reset,重置按钮
button,普通按钮
ACCP V4.016
表单输入元素 -3
身份证号 <input type="Text" name="PID" value=""
size="20" maxlength="18">
TEXT（文本）
密 码,<INPUT type=password value=“” name=,pass" size=15>
<TEXTAREA name=,textarea” clos="20" rows="5" >请填写您的工作经历 </TEXTAREA>
ACCP V4.017
表单输入元素 -4
性别,<INPUT TYPE=radio NAME=” sex” VALUE=” male” >男性
<INPUT TYPE=radio NAME=” sex” VALUE=” male” >女性
单选按钮和复选框你喜欢以下哪些明星：
<br>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="id2" value="Leon">郑秀文
<input type="Checkbox" name="id3" value="BonJovi"
checked>BonJovi
ACCP V4.018
HTML输入元素 -5
<BODY bgColor="#ccccff" Text="#000099">
<FORM ACTION="http://www.com.cn" METHOD="POST">
<B><H2 align="left">2004 年欧锦赛 </H2></B>
<P><B>预测“最佳球员” </B></P><P>
<INPUT TYPE="RADIO" NAME="myradio,VALUE="0">Ronaldo
<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham
<INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane
</P><P><B>预测大赛亚军 </B></P><P>
<INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西
<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法国
<INPUT NAME="mybox3" TYPE="CHECKBOX" VALUE="2">阿根廷
<BR></P><P><B>预测谁将成为 2004 年欧锦赛冠军？ </B></P><P>
<INPUT NAME="text1,TYPE="TEXT" SIZE="30"
MAXLENGTH="30"></P><P>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交 ">
<INPUT TYPE="RESET" NAME="Reset" VALUE="重置 "></P>
</FORM>
</BODY>
阅读代码，请问网页中的显示结果？
ACCP V4.019
表单输入元素 -6
下拉菜单
<B>谁是 2002 年世界杯冠军？ </B>
<SELECTNAME =“myselect">
<OPTION SELECTED>西班牙 </OPTION>
<OPTION>法国 </OPTION>
<OPTION>巴西 </OPTION>
<OPTION>德国 </OPTION>
</SELECT>
列表选项
ACCP V4.020
表单输入元素 -7
课堂练习,请编写 HTML代码
ACCP V4.021
框架广告栏顶部框架 (top.htm)
商品 详细介绍右侧框架
(main.htm)
商品导航左侧框架
(left.htm)
ACCP V4.022
为何使用框架在另一个固定部分显示导航部分在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。
站点中只有此部分是变化的。
ACCP V4.023
使用框架演示如何做上述框架？
ACCP V4.024
总结 4-1
<TABLE width=“?” border=“?” align＝“？” >
<CAPTION> 表格标题 </ CAPTION >
<TR bgcolor＝“？” >
<TH align=“?”>数据 1 <TH>
<TH align=“?”>数据 2 <TH>
…..
</TR>
<TR bgcolor＝“？” >
<TD align=“?”>数据 11 </TD>
<TD align=“?”>数据 22</TD>
</TR>
</TABLE>
跨行的单元格：
<TD rowspan=“n”>数据 11 </TD>
跨列的单元格：
<TD colspan=“n”>数据 22 </TD>
表格的一般语法：
ACCP V4.025
总结 4-2
<FORM action=“?” method=“?” >
文本框 <INPUT type＝,text” name＝“？” value＝“？”
maxlength=“？ ">
密码框 <INPUT type＝,password” name＝“？” value
＝“” >
文本域 <textarea name=“？,clos=“？,rows=“？,>
</textarea >
单选按钮 <INPUT TYPE=radio NAME=”？”
VALUE=”？” >
男性复选框 <input type="Checkbox" name="？ " value="？ ">
酒井法子
表单的一般语法：
ACCP V4.026
总结 4-3
<SELECT NAME ="？ ">
<OPTION >选项 1</OPTION>
<OPTION>选项 2</OPTION>
<OPTION>...</OPTION>
</SELECT>
<INPUT type="Submit" value="提交 " name="?">
<INPUT type="reset" value="重置 " name="?">
</ FORM>
ACCP V4.027
总结 4-4
框架顶部窗口显示广告 top.htm
显示详细内容
main.htm左侧窗口显示导航链接
left.htm
使用表格和表单第五章
ACCP V4.02
回顾
自动刷新功能应使用哪个 HTML标签？
标签区分大小写吗？
段落标签 <P>和换行标签 <BR>有什么区别？
字符标签 <FONT>有哪些常用属性？
使用图片标签 <IMG>显示图片 q.jpg，如何写 HTML代码?
写 HTML代码时，空格用什么表示？
显示如下所示的列表，如何写 HTML代码：
您认为乔丹的血型是？
A,A型
B,B型
C 以上都不对
显示如下所示的超链接，如何写 HTML代码：
请查看 Microsoft微软中国
ACCP V4.03
用 HTML 代码创建表格
创建表单
使用框架目标
ACCP V4.04
表格行列列标题在 HTML 文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题
ACCP V4.05
<HTML>
<HEAD>
<TITLE>使用表格 </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 >
<TR>
<TD>姓名 </TD>
<TD>性别 </TD>
<TD>分数 </TD>
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD>
<TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
创建表格
<TABLE>代表表格的开始,border=2表示边框尺寸为 2
<TR>表示行，这是表格的第一行，有三列数据,<TD>代表列表格的第 二行，有三列数据表格的第 三行，也有三列数据
ACCP V4.06
<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR>
<TH>姓名 </TH>
<TH>性别 </TH>
<TH>分数 </TH>
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD>
<TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
表格的标题
<CAPTION>表示表格标题
<TH>表示行或列标题，粗体显示表格的第 二行，有三列数据表格的第 三行，有三列数据
ACCP V4.07
<BODY>
<TABLE border=2 align=center>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR>
<TH>姓名 </TH>
<TH align="center">性别 </TH>
<TH align="right">分数 </TH>
</TR>
<TR>
<TD>Robert</TD>
<TD align="center">M</TD>
<TD align="right">80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>
表格的对齐方式整个表格居中姓名列默认左对齐性别列居中分数列右对齐
ACCP V4.08
合并单元格 (跨列 )<BODY><TABLE BORDER = 2 ALIGN =
CENTER>
<CAPTION>创建表格 </CAPTION>
<TH COLSPAN = 3>第一学期 </TH>
<TH COLSPAN = 3>第二学期 </TH>
<TR>
<TD>数学 </TD>
<TD>科学 </TD>
<TD>英语 </TD>
<TD>数学 </TD>
<TD>科学 </TD>
<TD>英语 </TD>
<TR>
<TD>98</TD>
<TD>95</TD>
<TD>80</TD>
<TD>95</TD>
<TD>87</TD>
<TD>88</TD>
....
COLSPAN=“n” 属性表示跨多少列
ACCP V4.09
合并单元格 (跨行 )<BODY><TABLE BORDER = 1,align = center>
<CAPTION><b>创建表格
<b></CAPTION>
<TR>
<TH></TH>
<TH></TH>
<TH>螺母 </TH>
<TH>螺栓 </TH>
<TH>锤子 </TH>
<TR>
<TD ROWSPAN = 3>第一季度 </TD>
<TD>一月 </TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>二月 </TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
.....
ROWSPAN=“n” 属性表示跨多少行
ACCP V4.010
<BODY>
<TABLE border=0 align=center width=50%>
<CAPTION align=top>学员档案信息 </CAPTION>
<TR bgcolor="#00FFFF">
<TH align="left">姓名 </TH>
<TH align="center">性别 </TH>
<TH align="right">分数 </TH>
</TR>
<TR bgcolor="#FFFF00">
<TD>Robert</TD>
<TD align="center">M</TD>
<TD align="right">80</TD>
</TR>
<TR bgcolor="#FFFF00">
<TD>Mary</TD>
<TD align="center">F</TD>
<TD align="right">18</TD>
</TR>
</TABLE>
表格的背景色和尺寸设置表格的颜色设置：
表格的背景色 <TABLE bgcolor=颜色值 >
行的背景色 <TR bgcolor=颜色值 >
列的背景色 <TD bgcolor=颜色值 >
颜色值可以采用 RGB（ red/green/blue）红绿蓝十六进制值表示，如红色 #FF0000,
或是一些预定义色彩名称,red,blue,yellow等。
表格的尺寸设置：
<TABLE width=n1 height=n2>
例如：
<TABLE width="200" height="100">
表示一个长为 200像素，宽为 100像素的表格。
<TABLE width=20% height=10%>
表示一个宽为窗口的 20%，高为窗口的 10%的表格。
18
80
分数
F
M
性别
Mary
Robert
姓名学员档案信息
ACCP V4.011
表单输入元素 -7
课堂练习,请编写 HTML代码
ACCP V4.012
表单
ACCP V4.013
METHOD =“post或 get”
表单 <FORM>
ACTION METHOD
指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法,
一般为 post或 get方法,
post方法比较安全
ACTION =,URL”
<FORM action=“http://www.sohu.com” method=“post”>
ACCP V4.014
表单输入元素 -1
Type 此属性指定元素的类型。 元素类型可以有多种选择,TEXT、
PASSWORD,CHECKBOX,RADIO,SUBMIT,RESET,FILE、
HIDDEN 和 BUTTON。 默认选择为 TEXT。
Name 此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1,TEXT2 或选择的任何名称来标识它们。 Name 属性的作用域是在 FORM 元素内。
Value 此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为
RADIO，则必须指定一个值。
Size 此属性指定控件的初始宽度。 如果 TYPE 为 TEXT 或 PASSWORD，
则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为
RADIO 或 CHECKBOX 时，使用此属性。
文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”
value=“?” maxlength=“?” checked=“?”>
ACCP V4.015
表单输入元素 -2
<INPUT name="button1" type="submit" value="提交 ">
<INPUT name="button2" type="reset" value="重置 ">
<INPUT name="button3" type="button" value="普通按钮 ">
BUTTON（按钮）
Type 属性：
submit,提交按钮
reset,重置按钮
button,普通按钮
ACCP V4.016
表单输入元素 -3
身份证号 <input type="Text" name="PID" value=""
size="20" maxlength="18">
TEXT（文本）
密 码,<INPUT type=password value=“” name=,pass" size=15>
<TEXTAREA name=,textarea” clos="20" rows="5" >请填写您的工作经历 </TEXTAREA>
ACCP V4.017
表单输入元素 -4
性别,<INPUT TYPE=radio NAME=” sex” VALUE=” male” >男性
<INPUT TYPE=radio NAME=” sex” VALUE=” male” >女性
单选按钮和复选框你喜欢以下哪些明星：
<br>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="id2" value="Leon">郑秀文
<input type="Checkbox" name="id3" value="BonJovi"
checked>BonJovi
ACCP V4.018
HTML输入元素 -5
<BODY bgColor="#ccccff" Text="#000099">
<FORM ACTION="http://www.com.cn" METHOD="POST">
<B><H2 align="left">2004 年欧锦赛 </H2></B>
<P><B>预测“最佳球员” </B></P><P>
<INPUT TYPE="RADIO" NAME="myradio,VALUE="0">Ronaldo
<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham
<INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane
</P><P><B>预测大赛亚军 </B></P><P>
<INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西
<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法国
<INPUT NAME="mybox3" TYPE="CHECKBOX" VALUE="2">阿根廷
<BR></P><P><B>预测谁将成为 2004 年欧锦赛冠军？ </B></P><P>
<INPUT NAME="text1,TYPE="TEXT" SIZE="30"
MAXLENGTH="30"></P><P>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交 ">
<INPUT TYPE="RESET" NAME="Reset" VALUE="重置 "></P>
</FORM>
</BODY>
阅读代码，请问网页中的显示结果？
ACCP V4.019
表单输入元素 -6
下拉菜单
<B>谁是 2002 年世界杯冠军？ </B>
<SELECTNAME =“myselect">
<OPTION SELECTED>西班牙 </OPTION>
<OPTION>法国 </OPTION>
<OPTION>巴西 </OPTION>
<OPTION>德国 </OPTION>
</SELECT>
列表选项
ACCP V4.020
表单输入元素 -7
课堂练习,请编写 HTML代码
ACCP V4.021
框架广告栏顶部框架 (top.htm)
商品 详细介绍右侧框架
(main.htm)
商品导航左侧框架
(left.htm)
ACCP V4.022
为何使用框架在另一个固定部分显示导航部分在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。
站点中只有此部分是变化的。
ACCP V4.023
使用框架演示如何做上述框架？
ACCP V4.024
总结 4-1
<TABLE width=“?” border=“?” align＝“？” >
<CAPTION> 表格标题 </ CAPTION >
<TR bgcolor＝“？” >
<TH align=“?”>数据 1 <TH>
<TH align=“?”>数据 2 <TH>
…..
</TR>
<TR bgcolor＝“？” >
<TD align=“?”>数据 11 </TD>
<TD align=“?”>数据 22</TD>
</TR>
</TABLE>
跨行的单元格：
<TD rowspan=“n”>数据 11 </TD>
跨列的单元格：
<TD colspan=“n”>数据 22 </TD>
表格的一般语法：
ACCP V4.025
总结 4-2
<FORM action=“?” method=“?” >
文本框 <INPUT type＝,text” name＝“？” value＝“？”
maxlength=“？ ">
密码框 <INPUT type＝,password” name＝“？” value
＝“” >
文本域 <textarea name=“？,clos=“？,rows=“？,>
</textarea >
单选按钮 <INPUT TYPE=radio NAME=”？”
VALUE=”？” >
男性复选框 <input type="Checkbox" name="？ " value="？ ">
酒井法子
表单的一般语法：
ACCP V4.026
总结 4-3
<SELECT NAME ="？ ">
<OPTION >选项 1</OPTION>
<OPTION>选项 2</OPTION>
<OPTION>...</OPTION>
</SELECT>
<INPUT type="Submit" value="提交 " name="?">
<INPUT type="reset" value="重置 " name="?">
</ FORM>
ACCP V4.027
总结 4-4
框架顶部窗口显示广告 top.htm
显示详细内容
main.htm左侧窗口显示导航链接
left.htm
