一、表格
1、概念
（1）表格一共有三个标签：table、tr、td。
- table表示表格
- tr表示一行
- td表示列（单元格）
2、表格语法
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
3、属性
（1）<table>中的属性
① 表格的边框：border
- border的值表示边框的宽度（粗细），默认值为0。
Demo：写一个三行两个的表格
<table border="1">
<!--第一行-->
<tr>
<td>第一行第一列</td>
<td>第一行第一列</td>
</tr>
<!--第二行-->
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第三行第一列</td>
<td>第三行第一列</td>
</tr>
</table>
得到结果
② 设置表格中单元格与单元格的间隙：cellspacing
设置整个表格的单元格，属性仍旧放在<table>中，默认值为2。
<table border="1" cellspacing="0">
<!--第一行-->
<tr>
<td>第一行第一列</td>
<td>第一行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第三行第一列</td>
<td>第三行第一列</td>
</tr>
</table>
加了cellspacing之后，就会得到如下的结果，会发现单元格之间的间隙变小了，这样看起来会更舒适。
③ 设置整个表格的高度和宽度：width、height。
- 如果设置整个表格的宽高度，则放在
<table>中； - 如果要设置某一行或某一列的高度或者宽度，则放在相应
<tr>或者<td>中。 - 整个表格的宽度可以使用百分百，整个表格的高度不能使用百分百。
④ 设置表格相对于网页水平居中：align = “center”。
- 如果要作用于整个表格，则放在
<table>中； - 如果要设置某一行或某个单元格文字也居中，则放在相应
<tr>或者<td>中。
Demo：写一个九宫格，要求表格居中，文字居中，宽高度适中，表格间隙为0
<table border="1" width="300" height="300" cellspacing="0" align = "center">
<!--第一行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<!--第二行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<!--第三行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</table>
得到结果如下
⑤ 设置表格的背景颜色：bground。
- 如果要设置整个表格，则放在
<table>中； - 如果要设置某一行或某个单元格，则放在相应
<tr>或者<td>中。 - 当背景颜色存在冲突的时候，谁的范围小，则执行谁的。
⑥ 设置边框的颜色：bordercolor
⑦ 设置表格的表头：thead
<table border="1" cellspacing="0" align="center" width="500" height="80">
<!--设置标题-->
<thead>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</thead>
<tr align="center">
<td>张三</td>
<td>李四</td>
<td>王二</td>
</tr>
<tr align="center">
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
得到结果：
⑦合并单元格：colspan（列）和rowspan（行）
<table border="1" cellspacing="0" align="center" width="500" height="80">
<thead>
<th>标题一</th>
<th colspan="2">标题二</th> <!--合并二、三列标题-->
</thead>
<tr align="center">
<td rowspan="2">张三</td> <!--合并二、三列数据-->
<td>李四</td>
<td>王二</td>
</tr>
<tr align="center">
<td>222</td>
<td>333</td>
</tr>
</table>
得到结果:
（2）<tr>中的属性
- height：设置整行的高度，
<tr>中不能设置宽度。 - align：设置整行中单元格中的内容水平居中。
- bgcolor：设置整行中的单元格的背景颜色
（3）<td>中的属性
- height：设置单元格的高度。
- width：设置单元格的宽度。
- bgcolor：设置该单元格的背景颜色。
- background：设置单元格的背景图片。
- align：设置该单元格的内容所处的位置（left，right，center）。
- bordercolor：设置单元格的边框颜色。
二、表单
1、概念
表单：用户能够在网页上面的操作选项，一般用于注册、登录、完善信息、评论（恢复）提交等
2、语法
（1）输入框：
<input type = "text">
（2）密码
<input type = "password">
（3）按钮
<body>
<form action="" method="">
<input type = "submit">，点击提交之后，整个页面会刷新；
<input type = "button" value = "提交">，点击之后页面不会刷新，button必须使用value，在按钮上显示的文字；
<button>提交</button>，点击之后整个页面会刷新；
<input type = "reset">，清空表单的所有内容。
</form>
</body>
注意：<form></from>的作用是与后端交互。
<body>
<form action="" method="">
用户名：<input type="text" maxlength="5"/><br />
密码：<input type="password" /><br />
<input type = "submit"><br />
<input type = "button" value="提交2"><br />
<button>提交3</button><br />
<input type = "reset"><br />
</form>
</body>
得到结果如下
（4）单选框：只能选择一个，想要只选择一个，就必须使用属性name
<input type = "radio">
例如：
<body>
<form action="" method="">
性别：<input type = "radio" value="男" name="sex">男
<input type = "radio" value="女" name="sex">女
<input type = "radio" value="保密" name="sex">保密
</form>
</body>
得到结果：
（5）复选框
<input type = "checkbox">
例如：
<body>
<form action="" method="">
爱好：<input type = "checkbox">吃
<input type = "checkbox">睡
<input type = "checkbox">玩
</form>
</body>
得到结果：
（6）下拉框
<select>
<option></option>
</select>
例如：
<body>
<form action="" method="">
城市：<select>
<option>成都</option>
<option>重庆</option>
<option>西安</option>
<option>南京</option>
</select>
</form>
</body>
得到结果：
（7）文本域
<textarea cols = "列数" rows = "行数"></textarea>
文本域可以设置行和列，例如：
<body>
<form action="" method="">
简介：<textarea cols="10" rows="5"></textarea>
</form>
</body>
得到结果：
得到的右侧的输入框可以调节大小。
