第3章表格布局与表单交互-CSDN博客

本文链接：https://blog.csdn.net/2301_81311094/article/details/142367610

3.1 表格概述
3.1.1 表格的结构
3.1.2 表格的基本语法

<table></table> 表格标记

<caption></caption> 表格标题标记

<th></th> 表格表头标记

<tr></tr> 表格的行标记

<td></td> 表格的列标记
3.2 表格属性的设置
3.2.1 表格边框属性

		<table border="2px">
			<caption>23软件1班名单</caption>
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>周朝伟</td>
				<td>男</td>
			</tr>
		</table>

3.2.2 表格的宽度和高度属性

		<table width="23%" height="25%">
			<caption>23软件1班名单</caption>
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>周朝伟</td>
				<td>男</td>
			</tr>
		</table>

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

		<table bgcolor="#aaffff">
			<caption>23软件1班名单</caption>
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>周朝伟</td>
				<td>男</td>
			</tr>
		</table>

		<table background="img/1.png">
			<caption>23软件1班名单</caption>
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>周朝伟</td>
				<td>男</td>
			</tr>
		</table>

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性
3.2.6 表格水平对齐属性
3.2.7 设置表格的（tr）标记行的属性
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
3.2.9.2 单元格跨列
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.5 综合案例——表格与表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册信息</title>
		<style type="text/css">
		fieldset{
			width:700px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="forml" id="forml">
			<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="password" name="textfield2" id="textfield2" /></td>
			</tr>
			<tr>
				<td width="200" align="right">确认密码：</td>
				<td><input type="password" name="textfield3" id="textfield3"/></td>
				</tr>
			<tr>
				<td width="200" align="right">性别：</td>
				<td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
				男< img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
				<input type="radio" name="radio" id="radio2" value="radio2"/>
				女< img src="img/Female.gif" width="23" height="21" align="absmiddle"/></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"/>看书
						<input type="checkbox" name="checkbox2" id="checkbox2"/>上网
						<input type="checkbox" name="checkbox3" id="checkbox3"/>打球
					</td>
				</tr>
				<tr>
					<td width="200" align="right" >相片：</td>
					<td height="25"><input type="file" name="f