html--table表格

本文详细介绍了HTML中table标签的基本用法及其各种应用场景,包括表格的完整和省略写法、列合并与行合并操作,并展示了如何通过iframe进行网页嵌套。

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

table表格

1.1 table的完整用法

格式

<table>
	<thead>
		<tr>
			<th>项目1</th><th>项目2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>100个</td><td>120个</td>
		</tr>
		<tr>
			<td>30元</td><td>56元</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>结束</td>
		</tr>
	</tfoot>
</table>

效果
在这里插入图片描述

  1. table分为3部分:thead、tbody、tfoot,即表格的头部、中间部分和尾部。一般要改动的只是tbody部分;
  2. tr代表行,td代表列,th代表加粗列。

1.2 table的省略用法

格式

<table>
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
</table>

效果
在这里插入图片描述

1.3 table的合并

关键字colspan='n',列合并,n为要合并的列数;rowspan='n',行合并;border='1',边框距离为1;width='90%',宽度为相对于当前网页的90%。
格式:

<table border="1px" width="90%">
	<thead>
		<tr>
			<th>标题1</th><th>标题2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan='2'>合并列1</td>
		</tr>
		<tr>
			<td rowspan="2">合并行1</td><td>行1</td>
		</tr>
		<tr>
			<td>行2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">合并列2</td>
		</tr>
	</tfoot>
</table>

效果:
在这里插入图片描述

border="1px" width="90%"设置边框为1像素,宽度为相对于当前网页大小90%。

1.4 iframe网页嵌套

格式:

<table>
	<iframe src="./html1.html" width="90%" height="300px"></iframe>
</table>

效果:
在这里插入图片描述

在一个网页中嵌套如另一个网页。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值