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

下载本文档

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

文档简介

※掌握创建表格的HTML标记；※掌握表格的CSS样式控制；※掌握创建表单的HTML标记；※掌握表单的CSS样式控制。

第6章表格与表单学习目标：第6章表格与表单6.1表格案例：学生信息表制作学生信息表，浏览效果如图6-1所示。具体要求如下：（1）创建一个6行7列的表格。（2）设置表格标题——学生信息表。（3）在表格标记中添加相应文本内容，并用<th>标记为表格设置表头。（4）通过CSS整体控制表格边框样式。（5）通过CSS设置单元格边框样式。第6章表格与表单6.2.1表格标记例6-1在网页上创建如图6-2所示的简单表格。文件名：6-1.html6.2表格相关知识第6章表格与表单代码如下：<body><h2>学生成绩表</h2><tableborder="1"><tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th></tr><tr><td>01</td><td>马丽文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛涛</td><td>男</td><td>92</td></tr><tr><td>03</td><td>张军力</td><td>男</td><td>98</td></tr></table></body>第6章表格与表单创建表格的基本标记有：<table></table>：用于定义一个表格。<tr></tr>：用于定义表格的一行，该标记必须包含在<table></table>中，表格有几行，在<table></table>中就要有几对tr></tr>标记。<th></th>：用于定义表头的单元格，该标记必须包含在<tr></tr>中，表头行有几个单元格，在<tr></tr>中就要有几对<th></th>标记。该单元格中的文字自动设为粗体、在单元格中居中对齐显示。<td></td>：用于定义表格的普通单元格，该标记必须包含在<tr></tr>中，一行有几个单元格，在<tr></tr>中就要有几对<td></td>标记。该单元格中的文字自动设为左对齐显示。在例6-1的代码中，在<table>标记中用到了border属性，其作用是给表格添加边框，如果却掉该属性，则表格默认情况下无边框。默认情况下，表格的宽度和高度靠其自身的内容来支撑。如果要进一步设置表格的外观样式，可以设置表格的相关属性来实现。

第6章表格与表单6.2.2<table>标记的属性属性名作用属性值border设置表格的边框像素width设置表格的宽度像素height设置表格的高度像素align设置表格的对齐方式left｜center｜rightbgcolor设置表格的背景颜色预定义的颜色值｜#RGB｜rgb()background设置表格的背景图像URL地址cellspacing设置单元格与单元格之间的空白间距默认为2像素cellpadding设置单元格与边框之间的空白间距默认为1像素第6章表格与表单6.2.2<table>标记的属性例6-2网页上创建如图6-3所示的表格。文件名：6-2.html第6章表格与表单修改6-1.html中的代码如下：<body><h2align="center">学生成绩表</h2><tableborder="5"align="center"width="400"height="150"="#99FFCC"cellpadding="3"cellspacing="5"bgcolor="#99FFCC"><tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th></tr><tr><td>01</td><td>马丽文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛涛</td><td>男</td><td>92</td></tr>第6章表格与表单6.2.3<tr>标记的属性属性名作用属性值height设置行的高度像素align设置一行内容的水平对齐方式left｜center｜rightvalign设置一行内容的垂直对齐方式top｜middle｜bottombgcolor设置行的背景颜色预定义的颜色值｜#RGB｜rgb()background设置行的背景图像URL地址第6章表格与表单例6-3在网页上创建如图6-4所示的表格。文件名：6-3.html第6章表格与表单代码如下：<h2align="center">学生成绩表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0">

<trheight="50"bgcolor="#CCCCCC"><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th></tr><tralign="center"><td>01</td><td>马丽文</td><td>女</td><td>94</td></tr>……第6章表格与表单6.2.4<th>和<td>标记的属性属性名作用属性值width设置单元格的宽度像素height设置单元格的高度像素align设置单元格内容的水平对齐方式left｜center｜rightvalign设置单元格内容的垂直对齐方式top｜middle｜bottombgcolor设置单元格的背景颜色预定义的颜色值｜#RGB｜rgb()background设置单元格的背景图像URL地址colspan

设置单元格合并的列数正整数rowspan设置单元格合并的行数正整数第6章表格与表单例6-4在网页上创建如图6-5所示的表格。文件名：6-4.html第6章表格与表单代码如下：<h2align="center">学生情况表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0"><trheight="50"bgcolor="#CCCCCC"><thcolspan="3">基本信息</th>

<thcolspan="3">成绩信息</th></tr>……注意：在<th>标记中使用colspan属性实现单元格的合并，使用bgcolor设置了两个单元格的背景颜色为红色。第6章表格与表单6.2.5使用CSS设置表格样式例6-5将例6-4创建的表格使用CSS属性设置表格的样式。效果如图6-6所示。文件名：6-5.html，代码如下：第6章表格与表单…<body><h2>学生情况表</h2><table><trclass="firstLine"><thcolspan="3">基本信息</th><thcolspan="3">成绩信息</th></tr><tr><th>学号</th><th>姓名</th><th>性别</th><th>数学</th><th>语文</th><th>英语</th></tr>…1.搭建表格结构：2.设置CSS样式：<styletype="text/css">h2{text-align:center;}table{width:400px;height:200px;border:1pxsolid#000;border-collapse:collapse;margin:0auto;}th,td{border:1pxsolid#000;}.firstLine{ background:#dedede; height:50px;}.redTd{

background:#f00;}</style>第6章表格与表单6.3表格案例实现第6章表格与表单1.搭建表格结构<h3>学生信息表</h3><tableclass="gridtable"><tr><th>学号</th><th>姓名</th><th>性别</th><th>家庭住址</th><th>联系电话</th><th>QQ</th><th>电子邮箱</th></tr><tr><td>2016020101</td><td>王红侠</td><td>女</td><td>山东济宁市</td><td>lt;/td><td>642076813</td><td>whongx@126.com</td></tr>……2.设置CSS样式<styletype="text/css">h3{ text-align:center;}table.gridtable{ font-family:verdana,arial,sans-serif; font-size:12px; color:#333; border:1px#666solid; border-collapse:collapse; margin:0auto;}table.gridtableth{ border:1pxsolid#666; padding:8px; background-color:#dedede;}table.gridtabletd{ border:1pxsolid#666; padding:8px; background-color:#fff;}</style>第6章表格与表单6.4表单案例：用户注册表第6章表格与表单6.5表单相关知识6.5.1认识表单表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。图6-10所示是用户登录信息表单。表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理，进行响应，这样就完成了浏览者和网站服务器之间的交互。第6章表格与表单6.5.2表单标记表单的基本语法及格式为：<formname="表单名称"action="URL地址"method="提交方式">…</form><form>标记主要处理表单结果的处理和传送，常用属性的含义如下：name属性：给定表单名称，以区分同一个页面中的多个表单。action属性：指定处理表单信息的服务器端应用程序。method属性：用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，使用method="post"可以大量的提交数据。注意：<form>标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在<form>与</form>之间添加相应的表单控件。第6章表格与表单6.5.3表单控件

1.input控件Input控件用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等。其基本语法格式如下：<inputtype=“控件类型”/>说明：<input/>标记为单标记，type属性取值如表6-4所示。属性属性值作用typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域第6章表格与表单6.5.3表单控件

2.textarea控件当定义input控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，字数没有限制时，就需要使用<textarea></textarea>标记。例如，在用户信息注册表单中，输入个人简历时的控件就是textarea控件。其基本语法格式如下：<textareacols="每行中的字符数"rows="显示的行数">

文本内容</textarea>第6章表格与表单6.5.3表单控件

3.select控件select控件提供下拉列表选项，供用户进行选择。下拉框通过select标记和option标记来定义。例如，在用户信息注册表单中，职业的选择项就使用下拉列表实现。其基本语法格式如下：<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>第6章表格与表单6.5.4使用CSS设置表单样式

例6-6创建一个用户登录表单，并使用CSS对表单样式进行设置，其效果如下图所示。文件名：6-6.html。第6章表格与表单<formaction="#"method="post"><tableclass="content"><tr><tdclass="left">用户名：</td><td><inputtype="text"value=""class="num"/></td></tr><tr><tdclass="left">密码：</td><td><inputtype="password"class="pas"/></td></tr><tr><td> </td><tdclass="btn"><inputtype="button"value=""/></td></tr></table></form>1.创建表单，用表格进行布局

第6章表格与表单<styletype="text/css">body{ font-size:12px; font-family:"宋体";}body,table,form,input{/*重置浏览器的默认样式*/ padding:0; margin:0; border:0;}.content{/*表格的样式*/ width:300px; height:150px; padding-top:20px; margin:50pxauto;/*表格在浏览器中居中*/ background:#DCF5FA;}.left{/*左侧单元格的样式*/ width:90px; text-align:right;}.num,.pas{/*对文本框设置相同的宽、高、边框和内边距*/ width:152px; height:18px; border:1pxsolid#38a1bf; padding:2px2px2px22px;}2.设置CSS样式

.num{/*定义第一个文本框的背景和文本颜色*/background:url(images/1.jpg)no-repeat5pxcenter#fff;color:#999;}.pas{/*定义第二个文本框的背景*/background:url(images/2.jpg)no-repeat5pxcenter#fff;}.btninput{/*定义按钮的样式*/ width:87px; height:24px; background:url(images/3.jpg)no-repeat;}</style>第6章表格与表单在使用CSS控制表单样式时，注意以下几个问题。（1）由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。（2）input控件默认有边框效果，当使用<input/>标记定义各种按钮时，通常需要清除其边框。（3）通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框。第6章表格与表单6.6表单案例实现第6章表格与表单新建一个网页文件，文件名称为：reg.html。双击文件reg.html，打开该文件，添加页面结构代码，然后设置CSS

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

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

最新文档

评论

0/150

提交评论