html之table简单的表格结构和复杂的表格结构

本文介绍了HTML中的表格元素,包括table的基本概念,简单的表格结构如caption、tr和td的使用,以及如何通过属性如border、width等设置样式。接着讲解了复杂的表格结构,涉及thead、tbody和tfoot的区别及th的应用,强调了在没有指定thead和tfoot时,内容默认位于tbody中。

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

目标:
1,什么是table
2,简单的表格结构
3,复杂的表格结构

1,什么是table?

table(表格),修饰行列规则的数据。类似于咱们使用的excel表格。

2,简单的表格结构
语法:

<table>
		<caption>表格名字</caption>
		<tr>
			<td></td>
			....
		</tr>
		...
</table>

【注:】
1,caption:表格的名字
2,tr:一个tr表示一行
3,td:一个td表示一列

例如:

<table>
		<caption>信息采集表</caption>
		<tr>
			<td>序号</td>
			<td>姓名</td>
			<td>性别</td>
			<td>籍贯</td>
		</tr>
		<tr>
			<td>1</td>
			<td>Jerry</td>
			<td>女</td>
			<td>河北衡水</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Tom</td>
			<td>男</td>
			<td>运城稷山</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Alex</td>
			<td>男</td>
			<td>天津宝坻区</td>
		</tr>
	</table>

代码效果如下图所示:
表格结构
我们下一步利用属性给表格添加样式,让他变好看一些,例如:
添加属性

代码如下:

	<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
		<caption>信息采集表</caption>
		<tr align="center">
			<td>序号</td>
			<td>姓名</td>
			<td>性别</td>
			<td>籍贯</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>Jerry</td>
			<td>女</td>
			<td>河北衡水</td>
		</tr>
		<tr align="center">
			<td>2</td>
			<td>Tom</td>
			<td>男</td>
			<td>运城稷山</td>
		</tr>
		<tr align="center">
			<td>3</td>
			<td>Alex</td>
			<td>男</td>
			<td>天津宝坻区</td>
		</tr>
	</table>

上述代码我们所用到的属性:
table属性:

1,border=“1” 设置边框
2,width=“80%” 设置table的宽度为浏览器的80%
3,align=“center” 设置整个表格居中
4,cellspacing=“0” 设置外间距为0 ,边框与边框之间的距离
5,cellpadding=“10” 设置内间距为10 边框与内容之间的 距离

tr属性

1,align=“center” 设置文本内容居中

3,复杂的表格结构
语法:

<table>
		<caption></caption>
		<thead>
			<tr>
				<th>标题,默认加粗居中</th>
				....
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				...
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>...</td>
				....
			</tr>
		</tfoot>
	</table>

【注:】

1,thead:表格的头部
2,tbody:表格的主题部分
3,tfoot:表格的底部
4,th:标题列,默认加粗居中

上述简单表格效果,我们用复杂表格实现,代码如下:

<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
		<caption>信息采集表</caption>
		<thead>
			<tr align="center">
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>籍贯</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center">
				<td>1</td>
				<td>Jerry</td>
				<td>女</td>
				<td>河北衡水</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>Tom</td>
				<td>男</td>
				<td>运城稷山</td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td>Alex</td>
				<td>男</td>
				<td>天津宝坻区</td>
			</tr>
		</tbody>
		
	</table>

1,上述代码中,我们只用到了thead和tbody,复杂的表格结构3部分,我们可以随意组合,thead和tbody,tbody和tfoot,或者3部分都使用,注意不能只有thead和tfoot;

2, 简单的表格结构,我们不区分thead,tbody和tfoot的话,我们所写的内容默认都在tbody中

ok,我们今天的内容暂时到这里了,本章主要讲的是表格结构。表格的属性详情,请看下一篇文章–html之table属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值