TML表格
表格由 <table> 标签来定义。每个表格都有若干行（由 <tr> 标签定义），每行被分为若干单元格（由 <td> 标签定义）。td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格常用标签
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| th | 定义表格的表头 |
| tr | 定义表格的行 |
| td | 定义表格的单元 |
| caption | 定义表格的标题 |
| thead | 定义表格的页眉 |
| tbody | 定义表格的主体 |
| tfoot | 定义表格的页脚 |
表格常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| border | npx | 设置表格的边框 |
| width | npx, n% | 设置表格的宽度 |
| colspan | number | 合并表格的列 |
| rowspan | number | 合并表格的行 |
| align | right left center justify |
表格在文档中的水平对齐方式 |
| valign | top middle bottom baseline |
表格在文档中的垂直对齐方式 |
| cellpadding | npx | 内容和边框之间的间距 |
| cellspacing | npx | 单元格之间的间距 |
| bgcolor | 颜色值 | 设置表格背景颜色 |
| frame | void border above below hsides lhs rhs vsides |
不显示外边框 四周都显示 显示上部的外边框 显示下部的外边框 显示上下的外边框 显示左部的外边框 显示右部的外边框 显示左右的外边框 |
| rules | none rows cols all |
内边框将不被显示 内边框将在行之间显示 内边框在列之间显示 内边框将被显示 |
表格实际效果
表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<table border="1">
<h2>流量调查表</h2>
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>9756488</td>
<td>9756</td>
<td>738087</td>
<td>43364677</td>
</tr>
<tr>
<td>46776686</td>
<td>85544</td>
<td>69357</td>
<td>568787</td>
</tr>
<tr>
<td>7538087</td>
<td>546774</td>
<td>476897</td>
<td>334545</td>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
</body>
</html>HTML表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等，这些元素，统称“控件”。
用于收集用户信息，进行人机交互操作。
表单使用表单标签 <form>来设置。
| 属性 | 描述 |
|---|---|
| name | 指定控件的名称，可重复 |
| id | 指定标签的唯一标识 |
| value | 输入（收集、设置）控件的值 |
| checked | 复选框（单选）组默认被选中的项目 |
| selected | 列表框组默认被选中的项目 |
| src | 图片框的图片来源 |
| onclick | 鼠标单击事件 |
| disabled | 禁用该控件 |
| multiple | 允许多选（适合普通列表框） |
实际效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<h2>American Metric电子产品调查表</h2>
<form action="./03.html" method="post" autocomplete="on">
姓名：<input type="text" name="" id="" placeholder="输入必须是2-6为字符" minlength="2" maxlength="6"><br>
购买日期: <input type="text">年
<select name="" id="">
<option value="">1月</option>
<option value="">2月</option>
<option value="">3月</option>
<option value="">4月</option>
<option value="">5月</option>
<option value="">6月</option>
<option value="">7月</option>
<option value="">8月</option>
<option value="">9月</option>
<option value="">10月</option>
<option value="">11月</option>
<option value="">12月</option>
</select>月
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>日<br>
电子邮件地址: <input type="email" placeholder="www.baidu.com"><br>
手机号码: <input type="text" placeholder="必须是以13/15/18开头的11位数字"><br>
您是否查看过我们的在线产品目录? <label for="nan"><input type="radio" name="sex" id="nan">是</label>
<input type="radio" name="sex" checked>否<br>
如果查看过,您对哪些产品有兴趣购买? (选择提供的产品):<br>
<input type="checkbox">大屏幕电视
<input type="checkbox">音频设备
<input type="checkbox">视频设备
<input type="checkbox">相机<br>
在填写订单之前,您还有什么问题,意见或建议?<br>
<input type="text"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>