HTML5 table表格属性以及简单实例不规则表格colspan rowspan

最新推荐文章于 2025-05-21 14:03:42 发布

必看吧

最新推荐文章于 2025-05-21 14:03:42 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_43665697/article/details/98166733

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML表格的创建方法，包括使用table、thead、tbody、tfoot等标签进行结构化布局，以及如何设置边框、间距和标题。同时，通过实例展示了如何实现表格内容的跨列和跨行。

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

	<!-- border设置边框  cellspacing 设置单元格之间间距 cellpadding 设置内容和单元格间距 -->
		<!-- align 设置相对于上级元素位置  此实例中table上级元素为body 所以相对于整个浏览器居中 -->
		<table border="1" cellspacing="0" cellpadding="0" align="center">
 
			<!-- caption 设置表格的标题 -->
			<caption>我是标题</caption>
			<!-- thead tbody tfoot 可以不写 面试可能会考你用法  -->
			<!-- 用法就是直接在里边用tr td 就行 -->
			<!-- thead tfoot 都不能重复存在 会被覆盖(不能存在2个 tfoot) -->
			<thead>
				<!-- 表格的每一行 -->
				<tr>
					<!-- 每一个单元格相当于每一列 -->
					<td>姓名</td>
					<td>账号</td>
					<td>密码</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>li</td>
					<td>123</td>
					<td>123456</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>总共:</td>
					<!-- colspan 为跨列 在此就是3,1 3,2 2个单元格合并 0开始 -->
					<!-- rowspan 为跨行用法相同 -->
					<td colspan="2">100人</td>
				</tr>
			</tfoot>
 
 
		</table>

显示如下: