html表格—学习总结

最新推荐文章于 2024-06-20 10:34:39 发布

乔哼哼

最新推荐文章于 2024-06-20 10:34:39 发布

阅读量377

点赞数

分类专栏：前端学习总结文章标签： html html5

本文链接：https://blog.csdn.net/qq_36111690/article/details/104519631

版权

前端学习总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表格由<table>标签定义。每行由<tr>标签定义，每行又可以拆分为若干个单元格，由<td>标签(table data)定义。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--打出tr*n>td*m再按tab键可以快速生成n行m列的表格标签-->
	<!-- border属性控制表格边框宽度，cellspacing控制单元格之间的间隔-->
	<table border="1px" cellspacing="0">
	<!--colgroup将列分组，span=2是将前两行作为一个组统一设置宽度-->
	<colgroup span="2" width="140px">
	<colgroup span="1" width="200px">
		<tr height="40px">
			<!--th标签等于加粗且居中的td标签-->
			<!--colspan=3是指将3个单元格合并-->
			<th colspan="3">合并单元格</td>
		</tr>
		<tr height="40px">
			<th>A</th>
			<th>B</th>
			<th>C</th>
		</tr>
		<tbody>
			<tr height="40px" align="center">
				<td>120</td>
				<td>110</td>
				<td>1000000</td>
			</tr>
			<tr height="40px" align="center">
				<td></td>
				<td>140</td>
				<td>20000000</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

显示结果如下：