基础表格
table 标签
- table 标签包含要定义的表格的全部内容；
- 组成：thead tbody tfoot，具体如下：（如果不写这三个直接写内容，浏览器会自动将所写的东西归入到 tbody 中）；
- border 设置表格线的像素；
- cellspacing 设置间隔；
<body>
<table border="1px" cellspacing = "0"> <!--border设置表格线的像素，cellspacing设置间隔-->
<thead></thead> <!--题头：用来放标题之类的东西-->
<tbody> <!--正文-->
<!--这里来设置具体的表格-->
</tbody>
<tfoot></tfoot> <!--脚注-->
</table>
</body>
现在代码运行什么都没有，因为我们还没有在 tbody 中定义表格的相关信息。
行和列
在 tbody 中
- tr 标签是行；
- td 标签是单元格；
- th 标签是题头单元格，且单元格中的文本加粗并居中；
- 快捷定义法：例如定义 4 行 5 列的表格，只需在 tbody 中输入
tr*4>td*5，点击回车键，就会自动生成基础表格代码，之后再具体操作； - col 标签：设置列的宽度；
- colgroup 标签：分组设置列的宽度；
- tr 标签中：height 设置行的高度；
- td 或 th 标签中：
- colspan 设置把列合并；
- rowspan 设置把行合并；
<body>
<table border="1px" cellspacing="0">
<thead></thead>
<tbody>
<!--快捷定义法：例如定义 4 行 5 列的表格，只需在 tbody 中输入 tr*4>td*5，点击回车键，就会自动生成基础表格代码-->
<colgroup span="6" width="100px"></colgroup> <!--colgroup 标签：分组设置列的宽度-->
<colgroup span="1" width="200px"></colgroup>
<tr height="40px"> <!--行，height设置行的高度-->
<th colspan="7">个人简历</th> <!--th:是单元格，且单元格中的文本加粗并居中；colspan 把列合并-->
</tr>
<tr height="40px">
<td>姓名</td> <!--td:是单元格-->
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td> <!--rowspan 设置把行合并-->
</tr>
<tr height="40px">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr height="40px">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr height="40px">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="40px">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
效果如下：
表单
制作表单需要用到 form 标签
- form 标签中：action 中写提交之后跳往的网址；
- input 标签：标签规定用户可输入数据的输入字段，type中定义文本类型，可以是文本字段、复选框、密码字段、单选按钮、按钮等等；
<body>
<form action="http://www.kuokuo666.com"> <!--action 中写提交之后跳往的网址-->
<table border="1px" cellspacing="0">
<thead></thead>
<tbody>
<colgroup span="2" width="200px"></colgroup>
<colgroup span="1" width="400px"></colgroup>
<tr height="40px">
<td rowspan="4" align="center">总体信息</td> <!--居中-->
<td colspan="2"></td>
</tr>
<tr height="40px">
<td align="right">用户名：</td> <!--靠右-->
<td>
<input type="text" name="login" id=""> <!--input定义输入框，type中定义文本类型，name中自定义-->
</td>
</tr>
<tr height="40px">
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="">
</td>
</tr>
<tr height="40px">
<td colspan="2" align="center">
<input type="submit" value="提交"> <!--（提交）按钮类型，value中定义按钮上的字-->
<input type="reset" value="重置"> <!--（重置）按钮类型，value中定义按钮上的字-->
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</form>
</body>
效果如下：
