第3章表格与表单_第1页
第3章表格与表单_第2页
第3章表格与表单_第3页
第3章表格与表单_第4页
第3章表格与表单_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

表格和表单LearningHTML&CSS第三章CompanyLogo课程要求与目标掌握表格的用法表单标记添加表单元素输入类表单元素菜单列表类表单元素文本域CompanyLogo表格行列列标题在HTML文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题CompanyLogo4创建表格<HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLEBORDER=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表示边框尺寸为2bordercolor为边框颜色<TR>表示行，这是表格的第一行，有三列数据，<TD>代表列表格的第二行，有三列数据表格的第三行，也有三列数据CompanyLogo表格标题<BODY><TABLEBORDER=2><CAPTIONalign=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>表示行或列标题，粗体显示表格的第二行，有三列数据表格的第三行，有三列数据CompanyLogo表格对齐方式<BODY><TABLEborder=2align=center><CAPTIONalign=top>学员档案信息</CAPTION><TR><TH>姓名</TH><THalign="center">性别</TH><THalign="right">分数</TH></TR><TR><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR>

</TABLE></BODY></HTML>整个表格居中姓名列默认左对齐性别列居中分数列右对齐CompanyLogo7合并单元格（跨列）<BODY><TABLEBORDER=2ALIGN=CENTER><CAPTION>创建表格</CAPTION><THCOLSPAN=3>第一学期</TH><THCOLSPAN=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”

属性表示跨多少列

CompanyLogo8合并单元格（跨行）<BODY><TABLEBORDER=1,align=center><CAPTION><b>创建表格<b></CAPTION><TR><TH></TH><TH></TH><TH>螺母</TH><TH>螺栓</TH><TH>锤子</TH><TR><TDROWSPAN=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”属性表示跨多少行

CompanyLogo9表格的背景色和尺寸设置<BODY><TABLEborder=0align=centerwidth=50%><CAPTIONalign=top>学员档案信息</CAPTION><TRbgcolor="#00FFFF"><THalign="left">姓名</TH><THalign="center">性别</TH><THalign="right">分数</TH></TR><TRbgcolor="#FFFF00"><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR><TRbgcolor="#FFFF00"><TD>Mary</TD><TDalign="center">F</TD><TDalign="right">18</TD></TR></TABLE>表格的颜色设置：表格的背景色<TABLEbgcolor=颜色值>行的背景色<TRbgcolor=颜色值>

列的背景色<TDbgcolor=颜色值>颜色值可以采用RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。表格的尺寸设置：

<TABLEwidth=n1height=n2>例如：<TABLEwidth="200"height="100">表示一个长为200像素，宽为100像素的表格。<TABLEwidth=20%height=10%>表示一个宽为窗口的20%，高为窗口的10%的表格。1880分数FM性别MaryRobert姓名学员档案信息CompanyLogo表格设置设置单元格间距：cellspacing设置单元格填充距离：cellpadding可以利用cellspacing和背景颜色设置表格为细线表格表格的嵌套

表格的嵌套一方面是为使页面的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。例：index.htmlCompanyLogo表格总结（1）标题级标签使用<H1>…<H6>段落标签使用<Palign＝“对齐方式”>…</P>无序列表使用<UL>标签,有序列表使用<OL>标签字体标签<Fontcolor=“颜色”size=“大小”face＝“字体”>插入图片：<imgsrc=?Align=?>插入横线：<hrcolor=?Size=?Width=?Align=?>CompanyLogo表格总结（2）

<TABLEwidth=“?”border=“?”align＝“？”><CAPTION>表格标题</CAPTION><TRbgcolor＝“？”><THalign=“?”>数据1<TH><THalign=“?”>数据2<TH>…..</TR><TRbgcolor＝“？”><TDalign=“?”>数据11</TD><TDalign=“?”>数据22</TD></TR></TABLE>跨行的单元格：<TDrowspan=“n”>数据11</TD>跨列的单元格：<TDcolspan=“n”>数据22</TD>CompanyLogo表单表单通常在设计一个HTML文档中，用于注册页面当用户填写完信息后做提交操作，将表单的内容从客户端的浏览器传送到服务器上，经过服务器处理程序后，再将用户所需信息送回客户端的浏览器上，这样网页就具有了交互性。最常见的表单主要包括文本框、单选按钮、复选框、按钮等，如下图所示，是一个常见的注册页面，它包含了文本框、单选按钮、复选框、按钮等表单内容。CompanyLogo常见表单文本框单选按钮密码框按钮复选框重置按钮CompanyLogo表单标签<Form><formname="表单名"method="传送方式"action="表单处理程序">

METHOD=“post或get”ACTIONMETHOD指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法,

post方法比较安全ACTION=“URL”CompanyLogo表单元素类型按表单元素的填写方式可以将表单分为输入类控件和菜单列表类控件输入类控件一般以input标记开始，说明这一表单元素需要用户的输入；菜单列表类以select开始，表示用户需要选择。

CompanyLogoInput所包含的元素类型CompanyLogo文本字段Text和密码Password身份证号<inputtype="Text"name="PID"value=“”size="20”maxlength="18">密码：<INPUTtype=passwordvalue=“”name=“pass"size=15>CompanyLogo单选按钮（radio）单选按钮用于一组相互排斥的值。组中的每个单选按钮应具有相同的名称。用户一次只能选择一个选项<p>性别：<inputtype=“radio”name=“sex”value=“male”>男<inputtype="radio"name="sex"value="female">女

可设置默认选项：checked="checked"CompanyLogo复选框（checkbox）元素checkbox用于创建复选框。用户可以选择多个复选框。选择了复选框时，会将一个name/value对与form一起提交。<p>请选择你的爱好：</p><p><inputtype="checkbox"name="test1"value="A1">上网<inputtype="checkbox"name="text2"value="A2">游泳<inputtype="checkbox"name="test3"value="A3">登山<inputtype="checkbox"name="test4"value="A4">写作CompanyLogo按钮（Button）

<INPUTname="button1"type="submit"value="提交"><INPUTname="button2"type="reset"value="重置"><INPUTname="button3"type="button"value="普通按钮">BUTTON（按钮）CompanyLogo隐藏域（hidden）隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示。当浏览者提交表单时，隐藏域的内容会一起提交给处理程序。创建隐藏域的语法如下：<inputtype=”hidden”name=”隐藏域名称”value=”提交的值”>CompanyLogo隐藏域（hidden）示例<html><head><title>隐藏域和action属性对比示例</title></head><body><formname="exam5"action="exam1.html"method="get">下面是几种不同属性的文本字段：<p>姓名：<inputtype="text"name="username"size=15><p>年龄：<inputtype="text"name="age"size=15maxlength=3><p><inputtype="hidden"name="page_id"value="example"><p><inputtype=“submit”name=“Submit”value=“提交”></form></body></html>CompanyLogo25文件域（File）文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传<html><head><title>文件域示例</title></head><body><formaction="mailto:yu@163.com"name="research"method="post">下面是某网站的注册页面：<p>用

户

名:<inputname="username"type="text"size=20><p>密

码:<inputname="password1"type="password"size=20><p>请上传你的头像：<inputtype="file"name="picture"></form></body></html>

当用户点击浏览后，会弹“选择文件”对话框。CompanyLogo菜单列表类和表单元素（Select）<p>证件类型<selectname="cardtype"><optionvalue="id_card">身份证</option><optionvalue="stu_card">学生证</option><optionvalue="drive_card">驾驶证</option><optionvalue="other_card">其它证件</option></select><p>关心的栏目<selectname="content"size="3"multiple><optionvalue="m1">体育栏目</option><optionvalue="m2">科技栏目</option><optionvalue="m3">新闻栏目</option><optionvalue="m4">汽车栏目</option><optionvalue="m5">房产栏目</option></se

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论