3.1 表格概述
3.1.1 表格的结构
3.1.2 表格的基本语法
<table></table>表格标记
<caption></caption>表格标题标记
<th></th>表格表头标记
<tr></tr>表格的行标记
<td></td>表格的列标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>胡慧敏</td>
<td>女</td>
</tr>
3.2 表格属性的设置
3.2.1 表格边框属性
border 表示表格边框粗细
bordercolorlight 表示表格亮边框颜色
bordercolor 表示表格边框颜色
bordercolordark 表示表格暗边形颜色
<table border=" " bordercolor=" " bordercolorlight=" " bordercolordark=" ">
</table>
3.2.2 表格的宽度和高度属性
width宽度 height 高度 可以设置长度单位或百分比，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。
设置宽高没办法放下内容时，宽生效 ，高不生效
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor="" background"">...</table>
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
<table bground="" background="">
</table>
3.2.4 表格边框样式属性
设置frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
语法：
<table frame=""rules="">........内容......</table>
frame和rules属性值及说明如下：
<table frame="" rules="">
</table>
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变单元格之间的间距。
设置表格标记中的cellpadding属性可以增加单元格之间的内容与内部边框的距离。
间距默认十个像素点。
语法：
<table cellspacing=""cellpadding=""</table>
（1）cellpadding。值的单位为像素或百分比。
（2）cellspacing。值的单位为像素或百分比，默认值为2px。
<table cellspacing="" cellpadding="">
</table>
3.2.6 表格水平对齐属性
通过设置align属性，设定对齐方式（居左，居右，居中）默认居左
<table align="left/center/right">
</table>
3.2.7 设置表格的（tr）标记行的属性
通过tr标记的align属性可以设置行内容的水平对齐方式
valign属性设置垂直对齐方式（顶部对齐，居中对齐，底部对齐）
<table align="center">
<tr align="left/center/right" valign="top/middle/bottom">
<td>
</td>
</tr>
</table>
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
语法：<td rowspan="行数">...</td>
<td rowspan="行数">
</td>
3.2.9.2 单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：<tdcolspan="列数">...</td>
设置表格单元格合并例题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置单元格跨列、跨行属性</title>
</head>
<body>
<h3 align="center">设置单元格跨列、跨行属性</h3>
<table border="1" width="500px" align="center" bordercolor="#3366ff">
<caption>专业研讨会日程安排</caption>
<tr align="center">
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>
<tr>
<td>8:00-10:00</td>
<td>10:10-12:00 </td>
<td>14:00-16:00</td>
<td>16;10-18:00</td>
</tr>
<tr align="center">
<td rowspan="2">学校领导讲话</td>
<td>大会主题报告</td>
<td>行业企业专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr align=" center">
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr align="center">
<td colspan="4">全天参观人工智能实训中心</td>
</tr>
</table>
</body>
</html>
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="#3333f">
<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>
<td height="300">
<table width="100%"border="I" bordercolar="#33f99">
<tr align=" center">
<td height="300" widih="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 表单
3.4.1 表单标记
<form>和<form>之间可包含各种表单信息输入标记
3.4.2 定义域和域标题
利用 feldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行组，fieldser标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素成到fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset 标记定义域标题。
语法：<form><fieldset>
<legend alig="left I center | right">城标题内容</legend>
</fieldset>
</form>
说明：fieldset 标记没有属性，是成对标记。legend 标记必须位于 fieldset标记内，也是
成对标记：有一个对齐 align 属性，属性值分别为left，center和right。
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。语法：
<input name="" type="text" maxlength="" size="" value="" readonly/>
说明：单行文本输入框的主要属性有 name，maxlength,size,value和readonly
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user">
</form>
</body>
</html>
3.4.3.2 密码输入框
设置input标记的type属性值为password，可以向表单中插入一个密码输入框。
语法：
<input name=" "type="password"maxlength=" "size=" "/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user">
密码：<input type="password" name="password">
</form>
</body>
</html>
3.4.3.3 复选框
属性值为checkbox，向表单中插入一个复选框，使用复选框可以在网页中设置多项选择。
语法：
<input name=" "type="checkbox"value=" "checked=" "/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user">
密码：<input type="password" name="password">
</form>
</body>
<form></form>
姓名：<input type="text" name="name">
爱好：
<input type="checkbox" name="c1" value="sing" checked /> 唱歌
<input type="checkbox" name="c1" value="dance"/>跳舞
<input type="checkbox" name="c1" value="basketball"/>篮球
<input type="checkbox" name="c1" value="run"/>长跑
</form>
</html>
3.4.3.4 单选按钮
属性值为radio，像表单中插入一个单选按钮，可以在网页中为某一选择设置多个但选项。
语法：
<input name=" "type="radio"value=" "checked=" "/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user">
密码：<input type="password" name="password">
</form>
</body>
<form></form>
姓名：<input type="text" name="name">
性别：<input type="radio" name="sex" value="male" checked />男性
性别：<input type="radio" name="sex" value="female"/>女性
<br/>
爱好：
<input type="checkbox" name="c1" value="sing" checked /> 唱歌
<input type="checkbox" name="c1" value="dance"/>跳舞
<input type="checkbox" name="c1" value="basketball"/>篮球
<input type="checkbox" name="c1" value="run"/>长跑
</form>
</html>
3.4.3.5 图像按钮
属性值为image，可以实现向表单发送一个图像，通过src属性加载图像。
语法：
<input name=" "type="image"src=" "width=" " height=""/>
<form>
<input type="image" src="img/start.jpg"/>
</form>
3.4.3.6 提交按钮
属性值为submit，可以使用value修改按钮名称
<form>
用户名：<input type="text" name="user">
密码：<input type="password" name="password">
<br/>
<input type="submit" value="登录"
</form>
3.4.3.7 重置按钮
属性值为reset,向表单中插入一个重置按钮，可以将信息清空，让用户重新填写。
<input type="reset" />
3.4.3.8 普通按钮
属性值为button，按钮里面没有任何东西，可以使用value添加名称
<input type="button" value="注册"/>
3.4.3.9 文件选择框
属性为file，可以实现向表单里面插入一个文件选择框。
<form>
请上传材料<input type="file" />
</form>
3.4.3.10 隐藏框
属性为：hidden，不需要用户输入，但是可以使用vlaue把信息传给后端
<form>
<input type="hidden" name="huiming" value="123"/>
</form>
3.4.4 多行文本输入框
textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的
文字信息，而且可以换行，并将这些信息提交到服务器。
<form>
请输入您宝贵的意见：
<textarea rows="4" cols="30"></textarea>
</form>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用seleet和option标
记来在表单中插入下拉菜单和列表项。
语法：
<select name="" size="" multiple>
<option value=""selected>文字信息1</ option>
<option value="">文字信息2</option>
</select>
说明：select 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size 和multiple 等属性。option标记有value和selected等属性。select 标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在option标记后面
<form>
请选择课程：
<select multiple>
<option value="">网页</option>
<option value="">ps</option>
<option value="">java</option>
<option value="">网络</option>
</select>
</form>