基础表格
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>
效果如下: