1.<table>标签
表格通过七个标签创建,分别是
- <table>表格标签
- <tr>行标签
- <th>表头标
- <td>表格数据标签
- <thead>定义表头
- <tbody> 元素用于对 HTML 表格中的主体内容进行分组
- < tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组,所以<tfoot>的内容无论写在前面还是后面,页面显示时都位于页脚。
<body>
<h3>信息收集表格</h3>
<table border="1" width="400" height="100">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>工作</th>
</tr>
</thead>
<tfoot>
<tr>
<td>肖校</td>
<td>56</td>
<td>老师</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张宏</td>
<td>21</td>
<td>无业游民</td>
</tr>
<tr>
<td>向苗</td>
<td>24</td>
<td>打字员</td>
</tr>
</tbody>
</table>
</body>
效果展示:
2.<table>标签的属性
- border---用于设置表格边框的大小,用正整数设定,正整数越大表格边框越大。
- height\width---用于设置表格的长宽,此设定只能改变<tr>和<td>,单位是px和%。如果行和列都设置了不同的高宽则取最大值。
- align---用于设置表格的对齐方式,对齐方式一共有三种,分别是:left左对齐(默认),right右对齐,center中间对齐。
- bgcolor---用于设定表格的背景颜色,具体颜色可参照颜色表。
- background---用于设定表格的背景图案,当同时设定了背景颜色和背景图案时,显示背景图案。
- cellpadding---用于设定表格的单元格和边距之间的距离。
- cellspacing---用于设定表格的单元格和单元格之间的距离。
<table border="1" width="400" height="100" align="center" bgcolor="#fffff0" cellpadding="0"
cellspacing="1">
效果展示:
3.表格的合并
<table>表格的合并有两个属性,且在表格的其他元素中通用。分别是:
- colspan---属性值为当前单元格跨越的列数。
- rowspan---属性值为当前单元格跨越的行数。
<body>
<table border="1" width="400" height="100" align="center" bgcolor="#fffff0" cellpadding="0"
cellspacing="1">
<thead>
<tr>
<th colspan="3">信息收集</th>
</tr>
</thead>
<tfoot>
<tr>
<td>肖校</td>
<td>56</td>
<td>老师</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>工作</th>
</tr>
<tr>
<td>张宏</td>
<td>21</td>
<td rowspan="2">打字员</td>
</tr>
<tr>
<td>向苗</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
效果展示:
4.表格的嵌套
表格的单元格里面也可以包含其他的HTML元素,只要它们全部包含于单元格内即可。当一个表格的单元格内是另一个表格时,就创建了一个“嵌套表格”。
<tr>
<td>张宏</td>
<td>21</td>
<td rowspan="2">
<table border="0" bgcolor="#fffff0">
<tr>
<td>工作名字</td>
<td>工作时间</td>
</tr>
<tr>
<td>销售员</td>
<td>2年</td>
</tr>
<tr>
<td>外卖员</td>
<td>1年</td>
</tr>
<tr>
<td>打字员</td>
<td>1年</td>
</tr>
</table></td>
</tr>
效果展示:
5.<table>和<form>的合用
在<table>里面包含<form>标签可以实现表格和表单的合用,以达到表单更加工整好看的目的。(表单的用法见上一篇文章)
<body>
<table align="center" bgcolor="#dcdcdc" border="1"cellspacing="0" style="border-color:#ffffff">
<form>
<tr>
<th colspan="2" bgcolor="#808080">用户注册</th>
</tr>
<tr>
<td >用户名</td>
<td><input type="text" name="UserName"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="UserPassword"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender" value="男" checked>男<input type="radio" name="gender" value="女">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" name="like" value="写作">写作
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育</td>
</tr>
<tr>
<td>省份</td>
<td>
<select>
<option name="province" value="北京">北京</option>
<option name="province" value="上海">上海</option>
<option name="province" value="陕西" selected>陕西</option>
<option name="province" value="四川">四川</option>
<option name="province" value="重庆">重庆</option>
<option name="province" value="河北">河北</option>
<option name="province" value="河南">河南</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea>
</td>
</tr>
<tr bgcolor="#808080">
<td></td>
<td><input type="submit" name="send" value="提交">
<input type="reset" name="reset" value="重置"></td>
</tr>
</form>
</table>
</body>
效果展示: