第三章表格布局与表单交互

3.1 表格的结构

调试软件:hBuilder

简单的html表格由table元素以及一个或者多个<tr>、<th>或<td>元素组成。<tr>元素定义表格的行，<th>元素定义表格的头，<td>定义表格单元格。

更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。

<table>标签的属性
属性   属性值   说明
align   left、center、right   定义表格相对周围元素的对其方式
bgcolor   rgb（x，x，x）、#xxxxxx、colorname   定义表格的背景颜色
border   pixels   定义表格边框的宽度
cellspacing   pixels或百分比   定义单元格之间的空白
cellpadding   pixels或百分比   定义单元边沿与其内容之间的空白
summary   text   定义表格的摘要
width   pixels   定义表格的宽度
<tr>标签定义hml表格中的行，tr元素包含一个或者多个th或则td元素。

<tr>标签的属性
属性

属性值   说明
align   right、left、center、justify、char   定义表格行内容对齐方式
bgcolor   rgb（x，x，x）、#xxxxxx、colorname   定义表格行的背景颜色
char   character   定义根据哪个字符来进行文本对齐
charoff   number   定义第一个对齐字符的偏移量
valign   top、middle、bottom、baseline   定义表格行中内容的垂直对齐方式
height   pixels、百分比   定义表格的行的高度
<td>和<th>标签的属性。<td>标签是html表格中的标准单元格，<th>标签是定义表格内表头单元格。th元素内部的元素文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。

<td>和<th>标签的属性
属性   属性值   说明
abbr   text   定义单元格中内容的缩写版本
align   right、left、center、justify、char   定义单元格内容的水平对齐方式
axis   category_name   对单元格进行分类
bgcolor   rgb（x，x，x）、#xxxxxx、colorname   定义单元格的背景颜色
char   character   定义根据哪个字符来进行文本对齐
charoff   number   定义对齐字符的偏移量
colspan   Number   定义单元格可横跨的列数
headers   header_cells'_id   定义与单元格相关的表头
height   pixels   定义表格单元格的高度
nowrap   nowrap
在 HTML 4.01 中，<td> 的 nowrap 属性已废弃。

nowrap 属性是一个布尔属性。

nowrap 属性规定表格单元格中的内容不换行。

rowspan   number   定义单元格可横跨的行数
scope   col、colgroup、row、rowgroup   定义单元格内容的垂直排列方式
valign   top、middle、bottom、baseline   定义表格的垂直对齐方式
width   pixels、百分比   定义表格单元格的宽度

3.1.1 表格的基本语法

<table>
			<caption>23级软件技术三班</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>李四</td>
				<td>女</td>
			</tr>
			<tr>
				<td>1</td>
				<td>男</td>
				<td>张三</td>
			</tr>
		</table>

3.2 表格属性的设置

使用``标签定义表格的整体结构。
使用``标签定义表格中的行。
使用``标签定义表格中的表头单元格（标题单元格）。
使用``标签定义表格中的数据单元格（普通单元格）。
可以设置行高度、边框背景色、背景图像、行文字的水平对齐方式和表格标题的垂直对齐方式等属性。

3.2.1表格边框属性

<table border="3px" bordercolor="#0000ff"
		 windth="40px" height="30px">

3.2.2表格的宽度和高度属性

<table windth="40px" height="30px">

3.2.3表格背景颜色和图像属性

bgcolor="#00aaff">

 background="img/school.png">

3.2.4表格边框样式属性

3.2.5表格单元格间距，单元格边距属性

<table border="2px" celllspacing="10px"</table>

<table border="2px" cellspading="10px"

3.2.6表格水平对齐属性

<table aling="left" valign="top" 
<tr align="center" valign="middle"</tr>
<tr align="right" valign="bottom"</tr>
</table>

3.2.7设置表格的（tr）标记行的属性

<table border="2px" width="200px" height="150px">
						<caption>23软件技术3班学生名单</caption>
							<tr align="left" valign="top">
								<th>序号</th>
								<th>姓名</th>
								<th>性别</th>
							</tr>
							<tr align="center" valign="middle">
								<td>1</td>
								<td align="right">刘易</td>
								<td>男</td>
							</tr>
							<tr align="right"valign="bottom">
								<td>2</td>
								<td>罗英</td>
								<td>女</td>
							</tr>
						</table>

3.2.8设置单元格的属性

高度的控制height <tr height=表格中某行高度>
设置边框背景色bgcolor <tr bgcolor="颜色代码">
设置边框背景图像——background <tr background="背景图像的地址">
行文字的水平对齐方式——align <tr align="水平对齐方式">
设置表格标题的垂直对齐方式——valign <caption valign="垂直对齐方式">表格标题</captiong>

3.2.9表格单元格跨行，跨列属性

一般使用<td>元素的colspan属性来实现单元格跨列操作，使用<td>元素的rowspan属性来实现单元格的跨行操作

3.3表格嵌套

<title>嵌套表格布局页面</title>
				<style>
				body {
				00
				9font-size:36px;
				9
				11</style>
				</head>
				13<body>
				14<h4 align="center”>嵌套表格布局页面</h4>
				15<table width="660px" border="1" align="center" bo
				16<tr>
			</table>

3.4表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

3.4.1表单标记

HTML的语法分为两种
1.属性语法
2.标记语法
（1）单标记
（2）双标记
（（1）始标记
（（2）尾标记

双标记命令

命令   含义
< html >内容< /html >   网页运行主体（建议自行体会）
< body >内容< /body >   主体主体（建议自行体会）
< title >内容< /title >   设置页面标题
< head >内容< /head >   头部文件
< deal >内容< /deal >   设置删除线
< ruby >内容< rt >< /rt >< /ruby >   设置内容标注
< b >内容< /b >   简单修饰文字-加粗
< i >内容< /i >   简单修饰文字-斜体
< sup >内容< /sup >   设置上标内容
< sub >内容< /sub >   设置下标内容
< p >内容< /p >   段落标记(存在强制换行)
< address >内容< /address >   设置地址文字(突出显示)
< tt >内容< /tt >   设置打印机显示风格
< samp >内容< /samp >   等宽文字设置
< cede >内容< /code >   等宽文字设置
< kbd >内容< /kbd >   键盘输入风格
< pre >内容< /pre >   预格式化(包含内容原样输出，含格式和距离等)
< blocjqute >内容< /blockqute >   设置段落缩进
< a >< /a >   超链接
< center > 内容< /center >   内容对于网页居中
< div >内容< /div >   没有任何语义，属于块级元素（可以独占一行），主要用于页面的布局
< span >内容< /span >   没有任何语义，内容只占自身大小，且不独占一行，主要用于设置样式
单标记

命令   含义
< !-- 内容–>   添加注释
< br >   回车
< hr >   插入并设置水平线
< link >

3.4.2定义域和域标题

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>域标签field和域标题legend的简单应用</title>
    <style type="text/css">
    form {
        width: 280px;
        margin: 20px;
    }
 
    div {
        text-align: center;
    }
    </style>
</head>
 
<body>
    <h3>域标签field和域标题legend的简单应用</h3>
    <hr>
    <form>
        <fieldset>
            <legend>账号信息</legend>
            <label>用户名: <input type="text" name="username"></label><br>
            <label>密　码: <input type="text" name="pwd1"></label><br>
            <label>确　认: <input type="text" name="pwd2"></label><br>
        </fieldset>
        <br>
        <fieldset>
            <legend>个人信息</legend>
            <label>姓名: <input type="text" name="name"></label><br>
            <label>单位: <input type="text" name="title"></label><br>
            <label>职位: <input type="text" name="position"></label><br>
        </fieldset>
    </form>
</body>
 
</html>

3.4.3表单信息输入

表单是一个包含表单元素的区域，HTML表单用于搜集不同类型的用户输入，表单元素是允许用户在表单中输入内容,如：文本框、密码框、单选框、多选框、按钮、下拉框、滑块等。

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

3.4.3.1单行文本输入框

<from>
			用户名:<input type="text" name="user"/>
			</from>

3.4..3.2密码输入框

<form>
			   <fieldset>
			      <legend>个人信息</legend>
				  姓名:<input type="text" name="name"/>
				  <input type="radio" name="sex" value="male"/>男
				  爱好:
				  <input type="checkbox" name="坤坤" value="sing"/>唱歌
				  <input type="checkbox" name="坤坤" value="rap"/>说唱
				  <input type="checkbox" name="坤坤" value="dance"/>跳舞
			   </fieldset>
			   <fieldset>
			       <select name="course">
			       <option value="">网页</option>
			       <option value="">java</option>
			       <option value="">ps</option>
			       <option value="">计算机网络</option>
			   </select>
			   请输入你的宝贵意见
			   <textarea name="info" rows="4" cols="50"></textarea>
			   </fieldset>
			</form>

3.4.3.3 复选框

 <input type="radio" name="sex" value="male"/>男 female女 >
			<form>
			姓名:<input type="text" name="name"/>
			爱好:
			<input type="checkbox" name="坤坤" value="sing"/>唱歌
			<input type="checkbox" name="坤坤" value="rap"/>说唱
			<input type="checkbox" name="坤坤" value="dance"/>跳舞
			</form>

3.4.3.4 单选按钮

<from>
			<input type="image" name="start" src="img/play game.jpg"/>
			<from/>

3.4.3.5 图像按钮

<input type="image" name="" value="" src="" width="" height="">

3.4.3.6 提交按钮

<from>
			用户名:<input type="text" name="user"/>
			密码:<input type="password" name="password"/>
			<br />
			<input type="submit" value="登录"/>
			</from>

3.4.3.7 重置按钮

<from>
			用户名:<input type="text" name="user"/>
			密码:<input type="password" name="password"/>
			<br />
			<input type="submit" value="登录"/>
			<input type="reset"/>
			</from>

3.4.3.8 普通按钮

<from>
			用户名:<input type="text" name="user"/>
			密码:<input type="password" name="password"/>
			<br />
			<input type="submit" value="登录"/>
			<input type="submit"/>
			<input type="button" value="注册" onclick="javascript:alert('注册新用户');"/>
			</from>

3.4.3.9 文件选择框

	<form>
			姓名:<input type="text" name="name"/>
			<input type="radio" name="sex" value="male"/>男
			爱好:
			<input type="checkbox" name="坤坤" value="sing"/>唱歌
			<input type="checkbox" name="坤坤" value="rap"/>说唱
			<input type="checkbox" name="坤坤" value="dance"/>跳舞
			<br />
			佐证材料:
			<input type="file" name="file"/>
			</form>

3.4.3.10 隐藏框

<from>
			   <input type="hidden" name="adc" value="123"/>
			</form>

3.4.4 多行文本输入框

<form>
			姓名:<input type="text" name="name"/>
			<input type="radio" name="sex" value="male"/>男
			爱好:
			<input type="checkbox" name="坤坤" value="sing"/>唱歌
			<input type="checkbox" name="坤坤" value="rap"/>说唱
			<input type="checkbox" name="坤坤" value="dance"/>跳舞
			<br />
			佐证材料:
			<input type="file" name="file"/>
			<br />
			请输入您的宝贵意见:
			<textarea name="info" rows="4" cols="50"></textarea>
			</form>

3.4.5 下拉列表框

<form>
			    <select name="course">
				<option value="">网页</option>
				<option value="">java</option>
				<option value="">ps</option>
				<option value="">计算机网络</option>
				</select>
				请输入你的宝贵意见
				<textarea name="info" rows="4" cols="50"></textarea>
			</form>
	</body>
</html>

3.5 综合案例——表格与表单
案例1——达维工作室“联系我们”子页
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室---联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:bold;
			}
			.zi1{
				font-weight:微软雅黑;
				font-size:20px;
				font-weight:bold;
				color:#ED630A;
			}
			.zi2{
				font-family:微软雅黑;
				font-weight:bold;
				color:#F60;
				text-decoration:underline;
			}
			.zibai{
				font-family:微软雅黑;
				color:#FFF;
			}
			body{
				background-image:url(img/bj.jpg);
			}
		</style>
	</head>
	<body>
		<table width="1190" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td>
			<table width="1190" border="0" align="center" cellpadding="O" cellspacing="5">
		<tr>
		  <td width="100" align="center" valign=" middle" bgcolor="#FFFFFF">
			  < img src="img/logo.jpg" alt="" width ="100" height="63"/></td>
			  <td width="100" align="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">网站首页</td>
		      <td width="100" align ="center"valign =" middle" bgcolor ="#FFFFFF" class="zi1">关于我们</td>
		      <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF"  class="zi1">团队合作</td>
			  <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
			  <td width="100" align=" center" valign =" middle" bgcolor =" #FFFFFF" class="zi1">设计理念</td>
			  <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
			  <td width="100" align ="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">联系我们</td>
			  </tr>
		 </table>
		 </td>
		 </tr>
		 <tr>
			 <td>
		<table width=" 100%"border="0" cellspacing="20" cellpadding="0">
		<tr>
		<td height="318">&nbsp;</td>
		<td widih="280" valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="20">
		<tr>
		<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
		</tr>
		<tr>
			<td height="196"bgcolor="#FFAF03">
			<p class="zibai">地址：广东省江门市xXXXXXXXX<br/>
			电话：0750-XXXXXX<br/>
			传真:0750-XXXXXX<br />
			QQ:12345678<br />
			电子邮箱：<br />
			[email protected]<br/>

标签：第三章,定义,表格,单元格,表单,3.4,属性
From： https://blog.csdn.net/2302_82060572/article/details/142349872

第三章表格布局与表单交互

3.1 表格的结构

3.1.1 表格的基本语法

3.2 表格属性的设置

3.2.1表格边框属性

3.2.2表格的宽度和高度属性

3.2.3表格背景颜色和图像属性

3.2.4表格边框样式属性

3.2.5表格单元格间距，单元格边距属性

3.2.6表格水平对齐属性

3.2.7设置表格的（tr）标记行的属性

3.2.8设置单元格的属性

3.2.9表格单元格跨行，跨列属性

3.3表格嵌套

3.4表单

3.4.1表单标记

3.4.2定义域和域标题

3.4.3表单信息输入

3.4.3.1单行文本输入框

3.4..3.2密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

3.4.5 下拉列表框

相关文章

赞助商

阅读排行

第三章 表格布局与表单交互

3.1 表格的结构

3.1.1 表格的基本语法

3.2 表格属性的设置

3.2.1表格边框属性

3.2.2表格的宽度和高度属性

3.2.3表格背景颜色和图像属性

3.2.4表格边框样式属性

3.2.5表格单元格间距，单元格边距属性

3.2.6表格水平对齐属性

3.2.7设置表格的（tr）标记行的属性

3.2.8设置单元格的属性

3.2.9表格单元格跨行，跨列属性

3.3表格嵌套

3.4表单

3.4.1表单标记

3.4.2定义域和域标题

3.4.3表单信息输入

3.4.3.1单行文本输入框

3.4..3.2密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

3.4.5 下拉列表框

相关文章

赞助商

阅读排行

第三章表格布局与表单交互