整齐的表格

最新推荐文章于 2024-06-07 12:53:31 发布

原创最新推荐文章于 2024-06-07 12:53:31 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

24 篇文章

订阅专栏

当需要显示格式化的数据时使用表格

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>整齐的表格</title>
	<!-- 当需要显示格式化的数据时使用表格 -->
	<style type="text/css">
		table{
			/*将table的边框进行融合*/
			border-collapse: collapse;

			/*默认值为separate边框独立*/
			/*border-spacing: 20px;*/
			/*边框距离的属性*/
		}
		td{
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<table>
		<!-- 行用tr标签表示 -->
		<!-- 一行有多少列在tr中用td表示 -->
		<tr>
		<!-- 跨4列 -->
			<td colspan="4">1</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
		<!-- 跨2行 -->
			<td rowspan="2">24</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td>33</td>
		</tr>
	</table>
</body>
</html>