第3章 表格布局与表单交互
3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元
3.1.2 表格的基本语法
在HTML中，常用表格主要通过5个标记构成：<table>，<caption>,<th>,<tr>, <td>。
(1)<table> 标记是成对标记，<table>表示表格开始，</table>表示表格结束
(2)caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用 caption标记可以给添加标题，该标应位于table标记与t标记之间的位置
(3) t(Table Row)标记是成对标记，<r>表示行开始，</tr>表示行结束
(4) th (Table Heading表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明。表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束。表头可以用山标记定义，也可以用td标记定义，但<1d></id>两标记之间的内容不自动居中、不加粗
3.2 表格属性的设置
表格是网页文件中布局的重要元素，制作网页的过程中常常要对网页中的表格做一些设置，对表格的设置实质是对表格标志属性的一些设置
3.2.1 表格边框属性
(1)border属性。用于设置边框的粗细，单位是像素。
(2) bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
(3) bordercolorlight 属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。
3.2.3 表格背景颜色与表格图像属性
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色
3.2.4 表格边框样式属性
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
(1) cellspacing。值的单位为像素或百分比，默认值为2px。
(2) cellpadding。值的单位为像素或百分比
3.2.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式
3.2.7 设置表格的（tr）标记行的属性
表格行t标记的属性用于设置表格某一行的样式。
通过r标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign 属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
3.2.8 设置单元格的属性
表格的列（td）标记的属性可以设置表格单元格的显示风格
3.2.9 表格单元格跨行、跨列属性
1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并
2 单元格跨列
使用单元格td标记的clospan属性可以设置单元格跨合并
3.3 表格嵌套
表格嵌套是一种常见的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套表格布局页面</title>
<style>
body{font-size: 36px;}
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width="660px" border="1" align="center" bordercolor="#3333ff">
<tr>
<td height="100">
<table width="100%" border="1" bordercolor="red">
<tr height="50" align="center">
<td rowspan="2" width="100">logo</td>
<td>广告条</td>
</tr>
<tr height="50" align="center">
<td>导航</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="300">
<table width="100%" border="1" bordercolor="#33ff99">
<tr align="center">
<td height="300" width="30%">左栏目</td>
<td height="300" width="70%">正文内容</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td height="100">版权信息</td>
</tr>
</table>
</body>
</html>
3.4 表单
1 表单标记
2 定义域和域标题
在HTML中，可以使用<fieldset>标记来定义一个字段集，用于将一组相关的表单元素分组在一起。
<fieldset>标记包裹了一组表单元素以及一个可选的<legend>标记，用作字段集的标题
<fieldset>
<legend align="center">个人信息</legend>
姓名：<input type="text" name="user"/>
<!-- 单选按钮 -->
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
<br />
<!-- 复选按钮 -->
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="reeper"/>说唱
</fieldset>
<fieldset>
<legend align="center">教学评价</legend>
请选择课程：
<select multiple>
<option name="web">网页</option>
<option name="java">JAVA</option>
<option name="andriod">安卓</option>
<option name="ps">PS</option>
<option name="internet">网络</option>
</select>
请输入您的宝贵意见：
<textarea rows="4" clos="30"></textarea>
</fieldset>
3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单输入信息标记是input标记，可以输入一行信息。input标记属性主要有name和type等，输入类型由type属性定义，设置属性值不同，就会产生不同的界面效果。
3.4.3.1 单行文本输入框
type的属性值为text,在表单中插入一个单行文本输入框
<from>
用户名:<input type="text" name="user"/>
</from>
3.4.3.2 密码输入框
type属性为password,用于接收用户输入的密码，并以星号或圆点等方式将输入内容隐藏起来
<form>
用户名<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>
3.4.3.3 复选框
type属性为checkbox,向表单插入一个复选框，value属性用于设置复选框的值，用户利用复选框在网页上设置多项选择，复选框有一个checked属性，可以用来设置复选框的初始选中状
<form>
姓名：<input type="text" name="user"/>
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
<form/>
3.4.3.4 单选按钮
type属性值为radio,用户可以通过单击单选按钮来选择其中一个选项。只有一个单选按钮可以被选中，选择其他的单选按钮会取消之前的选择。
在提交表单时，被选中的单选按钮的值会被提交给服务器，可以通过后端代码来处理这个值
<form>
姓名：<input type="text" name="user"/>
<!-- 单选按钮 -->
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
</from>3.4.3.5 图像按钮
type属性值为image，可以向表单插入一个图像按钮
<form>
<input type="image" src="img/66.jpg"/>
</form>
3.4.3.6 提交按钮
type属性值为submit,可以插入一个提交按钮，value设置按钮名称
<form>
<input type="submit" value="登录"/>
</form>
3.4.3.7 重置按钮
type属性值为reset,插入一个重置按钮，将表单输入内容清空
<form>
<input type="reset"/>
</form>
3.4.3.8 普通按钮
type属性值为button,与提交按钮不同，普通按钮通常用于执行一些前端操作，例如展示隐藏内容、弹出对话框、发送AJAX请求等。可以通过JavaScript来为普通按钮添加事件监听器，以便在用户点击按钮时执行特定的操作。
<from>
<input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
</from>
3.4.3.9 文件选择框
type属性值为file,可以向表单中插入一个文件选择框
<form>
请选择文件：<input type="file"/>
</form>
3.4.3.10 隐藏框
type属性为hidden,可实现向表单中插入一个隐藏框
<form>
<input type="hidden" name="abc" value="123"/>
</form>
3.4.4 多行文本输入框
多行文本输入框（Textarea）是一种用于接收多行文本输入的表单元素。它可以用于用户输入大段文字或多行文本的情况。可以使用<textarea>标签创建多行文本输入框。
<textarea>标签可以设置rows和cols属性，分别表示可见的行数和列数。可以根据实际需求调整这些属性的值
<form>
请输入您的宝贵意见 <textarea rows="4" clos="30"></textarea>
</form>
3.4.5 下拉列表框
下拉列表框（Select）是一种用于提供选项选择的表单元素。它允许用户从预定义的选项中选择一个或多个值，可以使用<select>标签创建下拉列表框，内部使用<option>标签定义每个选项
<form>
<!-- 下拉列表框 -->
请选择课程：
<select multiple>
<option name="web">网页</option>
<option name="java">JAVA</option>
<option name="andriod">安卓</option>
<option name="ps">PS</option>
<option name="internet">网络</option>
</select>
</form>
3.5 综合案例——表格与表单
利用表单制作一个“用户注册信息表”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>用户注册信息</title>
<style type="text/css">
fieldset{
width: 700px;
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form" id="form">
<fieldset> <legend>用户信息</legend>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名:</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td width="200" align="right">性别:</td>
<td>
<input type="radio" name="radio" id="radio1" value="radio" checked="checked" />
男<img src="img/0.png" width="22" height="21"align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio" />
女<img src="img/1.png" width="23" height="21"align="absmiddle"/>
</td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td><input name="textfield4" type="text" id="textfield4" size="12" />年
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月</td>
</tr>
<tr>
<td width="200" align="right">业余爱好：</td>
<td>
<input type="checkbox" name="checkbox" id="checkbox" />
<label for="checkbox">看书</label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2">上网</label>
<input type="checkbox" name="checkbox3" id="checkbox3" />
<label for="checkbox3">打球</label>
</td>
</tr>
<tr>
<td width="200" align="right">相片：</td>
<td><input type="file" name="filefield" id="filefield" /></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
扫一扫
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
