3.1 表格概述
表格是一种用于展示数据的有序结构，由行和列组成，每个单元格中可以包含文本、数字或其他信息。
3.1.1 表格的结构
表格标题、表头、行、列
3.1.2 表格的基本语法
table标签：设置表格
caption标签：表格标题
tr标签：行，包括th标签：表示表头（默认加粗）、列和td标签：表示内容、列
3.2 表格属性的设置
3.2.1 表格边框属性
表格的边框：
border属性，设置边框的粗细，单位像素(px）
bordercolor属性：设置边框颜色
3.2.2 表格的宽度和高度属性
表格的宽高：width属性（宽度）、height属性（高度），当设定宽高比例较小时，宽度会被调整，高度会失效
3.2.3 表格背景颜色与表格图像属性
bgcolor属性：设置表格背景颜色
background属性：设置背景图像（要设置图像的路径），默认从左上角截选
3.2.4 表格边框样式属性
3.2.5 表格单元格间距、单元格边距属性
表格的间距：cellspacing属性（格子与格子之间的距离）、边距：cellpadding（表格的内容与边框的距离）
3.2.6 表格水平对齐属性
使用align属性，对齐方式有三种：left（左对齐）、center（居中）、right（右对齐）
3.2.7 设置表格的（tr）标记行的属性
设置某一行（tr）的对齐方式：
使用align属性（左右），对齐方式有三种：left（左对齐）、center（居中）、right（右对齐），默认左对齐
使用valign属性（上下），对齐方式有三种：top（顶部对齐）、middle（居中）、bottom（底部对齐），默认居中
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
rowspan属性：<td rowspan="行数">...</td>
3.2.9.2 单元格跨列
colspan属性：<td colspan="列数">...</td>
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>设置单元格跨行、跨列属性</title>
</head>
<body>
<!-- 设置标题 -->
<h3 align="center">设置单元格跨行、跨列属性</h3>
<!-- 创建表格 -->
<table border="1px" align="center" width="500px">
<!-- 设置表格标题 -->
<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>
<td rowspan="2">学校领导讲话</td>
<td>大会主题报告</td>
<td>行业企业报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr>
<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>
</head>
<body>
<!-- 设置标题 -->
<h4 align="center">嵌套表格布局页面</h4>
<!-- 设置表格 -->
<table width="660px" align="center" border="1px">
<!-- 第一行 -->
<tr>
<!-- 第一行的第一列 -->
<td height="100px">
<!-- 在第一列中嵌套了一个表格（第二个表格） -->
<table width="100%" border="1">
<!-- 第二个表格第一行 -->
<tr height="50px" align="center">
<!-- 第一行的第一列 -->
<td rowspan="2" width="100px">logo</td>
<!-- 第一行的第二列 -->
<td>广告条</td>
</tr>
<!-- 第二个表格第二行 -->
<tr align="center">
<!-- 第二行的第一列 -->
<td>导航</td>
</tr>
</table>
</td>
</tr>
<!-- 第二行 -->
<tr>
<!-- 第二行的第一列 -->
<td height="300px">
<!-- 在第一列中嵌套了一个表格（第三个表格） -->
<table width="100%" border="1">
<!-- 第一行 -->
<tr align="center">
<!-- 第一列 -->
<td height="300" width="30%">左栏目</td>
<!-- 第二列 -->
<td height="300" width="70%">正文内容</td>
</tr>
</table>
</td>
</tr>
<!-- 第三行 -->
<tr>
<tr align="center">
<td height="100">版权信息</td>
</tr>
</tr>
</table>
</body>
</html>
图片展示：
3.4 表单
<from>标签
3.4.1 表单标记
3.4.2 定义域和域标题
fieldset属性：给表单分区域
<form>
<fieldset>
<legend align="center">个人信息</legend>
</fieldset>
<fieldset>
<legend align="center">教学评价</legend>
</fieldset>
</formlegend属性：给表单区域设置标题
align属性：设置对齐方式
3.4.3 表单信息输入
<input>标签，type属性决定作用
3.4.3.1 单行文本输入框
text属性
格式：<input type="text" name="xxx">
3.4.3.2 密码输入框
password属性
格式：<input type="password" name="xxx">
3.4.3.3 复选框
checkbox属性
格式：<input type="checkbox" name="xxx" value="参数（英文）" checked>
可选属性：
1.value属性：当勾选后向后端传递参数
2.checked属性：默认被选择，可手动关闭
3.4.3.4 单选按钮（多选一）
radio属性（name里文本内容必须相同）
格式：<input type="radio" name="xxx" value="参数（英文）" checked>
3.4.3.5 图像按钮
image属性
格式：<input type="image" src="img/1.jpg"/>
3.4.3.6 提交按钮
submit属性
格式：<input type="submit" value="登录"/>
value属性：更改文字，默认是提交
3.4.3.7 重置按钮
reset属性
<input type="reset"/>
3.4.3.8 普通按钮
button属性
格式：<input type="button" value="注册" οnclick="javascript:alert('注册成功')"/>
value属性：给按钮添加文字
onclick属性：是常用的javascript事件，点击某个元素时触发一些代码的执行
alert属性：弹出一个窗口，括号里面的必须是单引号才输出文本内容
3.4.3.9 文件选择框
file属性
格式：<input type="file"/>
3.4.3.10 隐藏框
hidden属性
格式：<input type="hidden" name="xxx" value="xxx"/>
一般不给用户看到，但是要给后端传递信息时使用
3.4.4 多行文本输入框
textarea属性
格式：<textarea rows="4" cols="40"></textarea>
rows属性：设置行数
cols属性：设置行数字数
3.4.5 下拉列表框
select属性：设置下拉列表
<select multiple>
<option>网页</option>
<option>ps</option>
<option>java</option>
<option>Android</option>
</select>multiple属性：设置下拉列表可多选，按ctrl键多选
3.5 综合案例——表格与表单
案例1 ———— 达维工作室“联系我们”子页（主要使用表格之间的嵌套）
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置标题 -->
<title>达维工作室————联系我们</title>
<!-- 以文本内容定义css格式（页面样式），后面方便调用 -->
<style type="text/css">
.chu{
/* bold:加粗 */
font-weight: bold;
}
.zi1{
font-family: "微软雅黑";
font-size: 20px;
font-weight: bold;
color:#ED630A;
}
.zi2{
font-family: "微软雅黑";
font-weight: bold;
color:#F60;
/* underline:文本下方添加一条水平线 */
text-decoration: underline;
}
.zibai{
font-family: "微软雅黑";
color: #FFF;
}
boby{
background-image: url(img/bj.jpg);
}
</style>
</head>
<body background="img/bj.jpg">
<table width="1190" border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<!-- width：设置宽度 表格的间距：cellspacing属性（格子与格子之间的距离）、边距：cellpadding（表格的内容与边框的距离） -->
<table width="1190" border="0px" cellpadding="0px" cellspacing="5px">
<tr>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF"><img src="img/logo.jpg" alt="" width="100" height="63"/></td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0px" cellpadding="0px" cellspacing="20px">
<tr>
<!-- ' ',表示空格 -->
<td height="318"> </td>
<td width="280" valign="top">
<table width="100%" border="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAF03">
<p class="zibai">
地址：广东省江门市XXXXXXXX<br />
电话：0750-XXXXXX<br />
传真：0750-XXXXXX<br />
QQ：123456789<br />
电子邮箱：<br />
123@163.com<br />
工作室网站：<br />
www.XXX.com
</p>
</td>
</tr>
</table>
</td>
<td width="280" valign="top">
<table width="100%" border="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="100" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
</tr>
<tr>
<td heigth="278" valign="top" bgcolor="#FC880D">
<p>
达维工作室是专业从事互联网相关开发的公司。<br />
专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br />
达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程.......
</p>
<p class="zibai"> </p>
<!-- ">"表示大于号 -->
<p class="zibai chu"><a href="#"></a>更多 >></p>
</td>
</tr>
</table>
</td>
<td width="280">
<table width="100%" border="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="100" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
</tr>
<tr>
<td height="332" valign="top"bgcolor="#66A00E">
<p class="zi2">我们的团队:</p >
<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最适合的设计方案。</p >
<p class ="zi2">我们的承诺：</p >
<p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司特点，设计出属于客户……</p >
<p class="zibai"> </p >
<p class="zibai chu">更多>></p >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
图片展示：
案例2 ———— 用户注册信息（主要使用表单等知识）
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册信息</title>
<style>
fieldset{
width: 700px;
}
</style>
</head>
<body>
<!-- 设置表单 -->
<form>
<fieldset>
<legend>用户注册信息</legend>
<table width="600px" border="0" align="center" cellpaddding="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 type="radio" name="radio" id="radio" value="radio"/>男
<input type="radio" name="radio" id="radio2" value="radio2"/>女
</td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td>
<input type="text" name="textfield4" id="textfield4" size="12px"/> 年
<!-- select属性：设置下拉列表 -->
<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" value="checkbox"/>看书
<input type="checkbox" name="checkbox2" value="checkbox2"/>上网
<input type="checkbox" name="checkbox3" value="checkbox3"/>打球
</td>
</tr>
<tr>
<td width="200" align="right">相片：</td>
<!-- 设置文件选择框 -->
<td><input type="file"/></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea rows="4" cols="40"></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>
图片展示：
扫一扫
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
