HTML的table表格元素及用法

最新推荐文章于 2025-03-25 21:26:20 发布

抱小猫

最新推荐文章于 2025-03-25 21:26:20 发布

阅读量2.2k

点赞数 3

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_52016943/article/details/117253774

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML中<table>标签的使用，包括表格的基本结构、属性设置，如border、align等，以及表格的合并、嵌套和与<form>标签的结合使用，提供了丰富的示例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果展示：