下载文档原格式
一、HTML表格的基本结构HTML表格是网页中常用的一种数据展示方式，它由表格元素<table>、行元素<tr>和单元格元素<td>组成，具体结构如下：1.1 定义表格```html<table><!-- 表格内容 --></table>```1.2 定义行```html<tr><!-- 行内容 --></tr>```1.3 定义单元格```html<td><!-- 单元格内容 --></td>```二、HTML表格的基本属性HTML表格可以通过一些属性来控制其显示效果和行为，下面是一些常用的表格属性：2.1 边框属性可以通过设置border属性来定义表格的边框样式，如：```html<table border="1"><!-- 表格内容 --></table>```2.2 合并单元格可以通过设置rowspan和colspan属性来合并单元格，实现复杂的布局效果。
2.3 表头和表体可以通过使用<thead>、<tbody>和<tfoot>元素来定义表格的表头、表体和表尾部分，提高表格的语义性和可读性。
三、HTML表单的基本结构HTML表单是网页中用于收集用户输入信息的一种方式，它由表单元素<form>、输入元素<input>、选择元素<select>和按钮元素<button>等组成，具体结构如下：3.1 定义表单```html<form><!-- 表单内容 --></form>```3.2 定义输入框```html<input type="text" />```3.3 定义下拉框```html<select><option value="1">选项1</option><option value="2">选项2</option></select>```3.4 定义按钮```html<button>提交</button>```四、HTML表单的常用属性HTML表单可以通过一些属性来控制其行为和样式，下面是一些常用的表单属性：4.1 提交位置区域可以通过action属性定义表单提交的位置区域，如：```html<form action="/submit" method="post"><!-- 表单内容 --></form>```4.2 提交方式可以通过method属性定义表单的提交方式，一般有get和post两种方式。
HTML列表和表单1. 列表标签去掉列表默认的样式：li { list-style: none; }1.1 有 / ⽆序列表标签名定义说明<ul></ul>⽆序标签没有顺序，⾥⾯只能包含 li<ol></ol>有序标签有顺序，⾥⾯只能包含 li1.2 ⾃定义列表适⽤于对术语或名词进⾏解释和描述（通常⽤作⽹站底部竖排链接）<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl>2. 表单标签⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息、表单域三个部分构成2.1 input 控件输⼊的控件，根据不同的属性值⽤来指定输⼊的功能语法：<input type="text" />type 属性（表单类型）属性值描述text（默认）单⾏⽂本输⼊框password密码输⼊框radio单选按钮（设相同name）checkbox复选按钮button普通按钮submit提交按钮reset重置按钮file上传⽂件按钮image图像形式的按钮（要有src）其他属性属性属性值描述name⾃定义定义控件的名称，⽤于区别不同的表单value⾃定义表单⾥默认显⽰的⽂本size正整数控件显⽰的宽度checked checked设置默认选中的项（作⽤于单复选按钮）maxlength正整数控件允许输⼊的最多字符数placeholder⾃定义⽆法选中的空的默认值，输⼊后请空2.2 label 标签⽤于绑定表单和元素，当点击⽂字的时候，光标会定位到指定的表单⾥⾯⽅式⼀：⽤ label 包含 input 控件<label>⽤户名：<input type="text" /></label>⽅式⼆：label ⽤ for 属性绑定 input 控件的 id<label for="sex">男</label><input type="radio" id="sex" />2.3 textarea 控件可以输⼊多⾏⽂本的输⼊框语法：<textarea >⽂本内容</textarea>属性：cols="每⾏中的字符数"rows="显⽰的⾏数"2.4 select 控件多个选项让⽤户选择的下拉列表<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>select 属性：multiple="multiple"允许多选option 属性：selected="selected"当前项为默认选中项3. form表单域通过 form 表单域收集表单控件的信息传递给服务器<form action="url地址" method="提交⽅式" name="表单名称">各种表单控件</form>属性属性值作⽤action url 地址指定接收表单数据的 url 地址，可为空传给本页处理method get / post设置表单数据取值的提交⽅式，隐藏 post，默认显⽰ get name控件的名称⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单。
电子商务网站建设上机实训作业（指导书）实训三 html语言基础（3）一、实训目的与要求：1 掌握表单的定义及应用。
2 掌握CSS样式的定义、种类、应用。
二、实训要求与准备：1 认真阅读实验指导书，熟悉实验内容。
2 在D盘（或E盘）建立如下文件夹结构：D:\myweb\（E:\myweb\），素材复制到该文件夹中。
3时间分配：4课时三、实验步骤第一部分：表单应用1 记事本中输入以下代码，以form1.html存盘，在IE中查看。
<html><head><title>表单的使用</title><head><body text="blue"><center><h2><font color=red>个人资料</font></h2></center><form action="" method="post">姓名: <input type="text" name="username"><br>主页的网址: <input type="text" name="" value="http://"><br>密码: <input type="password" name="pass"><br><input type="submit" value="发送"> <input type="reset" value="重设"></form></body></html>2记事本中输入以下代码，以grzl.html存盘, 在IE中查看。
HTML--表格与表单⼀、表格<table></table>表格 width:宽度。
可以⽤像素或百分⽐表⽰。
常⽤960像素。
border：边框，常⽤值为0。
cellpadding：内容跟边框的距离，常⽤值为0。
cellspacing：单元格与单元格之间的间距，常⽤值为0。
algin：对齐⽅式。
bgcolor：背景⾊。
background：背景图⽚。
<tr></tr>⾏ align:⼀⾏内容的⽔平对齐⽅式。
valign:⼀⾏内容的垂直对齐⽅式。
height：⾏⾼。
bgcolor：背景⾊。
background：背景图⽚。
<td></td>单元格<th></th>表头，单元格的内容⾃动居中、加粗 align:单元格内容的对齐⽅式。
valign:单元格的内容的垂直对齐⽅式。
width：单元格宽度。
height：单元格⾼度。
bgcolor：背景⾊。
background：背景图⽚。
内容必须放在单元格⾥，单元格必须放在⾏⾥，⾏必须放在表格⾥。
设置单元格⾏⾼、列⾼时，会同时影响对应的⾏或列。
单元格合并：（建议尽量⽤表格嵌套） colspan=“n” 合并同⼀⾏的单元格（后⾯写代码要减去相对应的列） rowspan=“n” 合并同⼀列单元格（从第⼆⾏开始减去相对应的列）⼆、表单<form id="" name="" method="post/get" action="负责处理的服务端">--输⼊系统时，必须有，以后⽤id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，post提交没有长度限制，且编码后内容不可见。
</form>1.⽂本输⼊（字符占2个空位，字符相当于3个像素） ⽂本框<input type="txt" name="" id="" value="" /> 密码框<input type="password" name="" id="" value="" /> ⽂本域<textarea name="" id="" cols=""(字符多少) rows=""(⼏⾏⾼)></textarea> 隐藏域<input type="hidden" name="" id="" value="" />2.按钮 提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址 重置按钮<input type="reset" name="" id="" disabled="disabled" value="" /> 普通按钮<input type="button" name="" id="" disabled="disabled" value="" /> 图⽚按钮<input type="image" name="" id="" disabled="disabled" src="图⽚地址" /> disabled使按钮失效 enable使按钮可⽤3.选择输⼊ 单选按钮组<input type="redio" name="" checked="checked" value="" /> name的值⽤来分组，value的值看不见，提交给程序⽤的，checked设置默认选项。
html-表格和表单（详细讲解）下⾯将介绍如何玩转各种表格和表单：表格的作⽤：展⽰数据（尽量不做页⾯布局）表格的属性：width、height、border、bordercolorcellspacing=“ ” 清除单元格边框的间距cellpadding="" 内容距离边框之间的边距align="" ⽔平对齐⽅式valign="" 垂直对齐⽅式 top bottom middle合并单元格：合并⾏：rowspan 合并列: colspan注：合并都是合并 td表格重点属性： 1、数据⾏分组 <thead></thead> 表格标题部分 <tbody></tbody> 表格内容部分 <tfoot></tfoot> 表格尾部部分 2、数据列分组 <colgroup span="value"></colgroup> <!--span属性为把⼏列分为⼀组--> 3、标题 <th></th>列标题 <caption></caption>表格标题 4、表格属性 4.1、单元格间距：border-spacing:value(px); 说明：单元格间距(该属性必须给table添加) 表⽰单元格边框之间的距离，不可取负值 4.2、合并相邻单元格边框：border-collapse:separate/collapse; 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并) 4.3、⽆内容时单元格的设置：empty-cells:show/hide; 说明：定义当单元格⽆内容时，是否显⽰该单元格的边框区域；show：显⽰；hide：隐藏； 4.4、显⽰单元格⾏和列的算法(加快运⾏的速度)： table-layout:auto/fixed; 说明：定义单元格⾏和列是否有内容决定，auto:⾃动；fixed：平均分配并固定 5、组分割线 rules="groups/rows/cols/all/none" 添加分隔线 说明： rows:位于⾏之间的线条 cols:位于列之间的线条 all：位于⾏和列之间的线条 none:没有线条 groups:位于⾏组和列组之间的线条表单的作⽤：收集数据input:type( text 输⼊框 submit 表单添加按钮 password 密码输⼊框 reset 重置按钮 button 空按钮 ) type不同，input的value意义不⼀样1、单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)⼥ 注：name必须⼀致2、复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" /> disabled="disabled" (禁⽤) checked="checked" (默认选中)3、下拉列表组 <select > <option>下拉选项1</option> <option>下拉选项2</option> ………… </select> 表⽰下拉列表，name属性不是必须的 默认选择项⽤selected属性；4、表单域多⾏⽂本框 语法: <textarea name="" cols="列字符的宽度" rows="⾏字符宽度" ></textarea> 多⾏⽂本。
淮海工学院计算工程学院实验报告书
课程名：Web应用开发技术
题目：HTML表格与HTML表单
班级：
学号：
姓名：
HTML表格与HTML表单
一实验目的
●掌握网页中插入表格数据的标记的用法。
●掌握不规则表格的创建方法
●掌握表格外观控制属性的应用
●掌握HTML表单的作用、HTML表单的两种提交方法及各自的使用场合；
掌握不同类型表单元素的使用方法；二实验容和要求
实验容：
1.创建网页文件sales.html，网页的标题为“ACME公司2014年销售输入”，使用合适的表格标记及属性显示ACME公司2013的4种产品4个季度的销售额。
显示效果如下（单元格数据为随机值，可以使用font等标记设置颜色等外观样式）：
2. 创建如下图所示的表单：
实验要求：
1.所有参与实验同学独立完成“实验容”部分，并记录实验步骤和结果填写在“实验步骤”、“实验结果”相应部分；
2.所有参与实验同学均需参阅资料，完成实验报告“思考题”部分容。
特别提示：若实验报告出现雷同情况，所涉及同学均无相应成绩；
三实验步骤
实验代码：
1.
<html>
<head>
<title>ACME公司2014年销售输入</title>
</head>
<body>
<table border="1" bordercolor="red" >
<tr>
<th>产品/季度</th>
2.。
