table colspan rowspan

该统计表详细记录了各类刑事案件的本旬案件数及其与上旬和同期的比较情况,包括侵财类案件和其他刑事案件的增减百分比。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>我的表格</title>
 </head>
<body>
<table align='center' valign='top' border=1px width=70% cellpadding='0' cellspacing='0' bordercolor='#4a98af' BGCOLOR='#ffffff'  style='border-collapse:collapse;'>
	<tr height=20px style='line-height:24px;'><td align='center' colspan='8'><b>环比同比统计表</b></td></tr>
	<tr height=20px style='line-height:24px;'><!-- 第一行 -->
		<td align='center' colspan='3' rowspan='2'>受理刑事案件类型</td> <!-- 一行一列 -->
	
		<td align='center' rowspan='2'>本旬案件数</td>
		<td align='center' colspan='4'>案件比较情况</td>
		
		
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第二行 -->
		
		
		<td align='center'>环比发案</td>
		<td align='center'>环比</td>
		<td align='center'>同比发案</td>
		<td align='center'>同比</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第三行 -->
		<td align='center' rowspan='8' style='padding-top:2px'>侵<br>财<br>类<br>案<br>件</td>
		<td align='center' rowspan='4'>两抢两盗</td>
		<td align='center'>入室盗窃</td>
		<td align='center'>78</td>
		<td align='center'>76</td>
		<td align='center'>4%</td>
		<td align='center'>55</td>
		<td align='center'>47%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第四行 -->
		
		
		<td align='center'>抢劫</td>
		<td align='center'>5</td>
		<td align='center'>2</td>
		<td align='center'>180%</td>
		<td align='center'>1</td>
		<td align='center'>400%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第五行 -->
		
		
		<td align='center'>抢夺</td>
		<td align='center'>6</td>
		<td align='center'>12</td>
		<td align='center'>-50%</td>
		<td align='center'>8</td>
		<td align='center'>-26%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第六行 -->
		
		
		<td align='center'>盗窃汽车</td>
		<td align='center'>2</td>
		<td align='center'>8</td>
		<td align='center'>-78%</td>
		<td align='center'>1</td>
		<td align='center'>100%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第七行 -->
		
		<td align='center' rowspan='4' style='padding-top:2px'>其<br>他<br>侵<br>财<br>案<br>件</td>
		<td align='center'>随扒窃</td>
		<td align='center'>56</td>
		<td align='center'>46</td>
		<td align='center'>-26%</td>
		<td align='center'>59</td>
		<td align='center'>-42.37%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第八行 -->
		
		
		<td align='center'>盗窃电动车</td>
		<td align='center'>48</td>
		<td align='center'>46</td>
		<td align='center'>-6.2%</td>
		<td align='center'>76</td>
		<td align='center'>-40.79%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第九行 -->
		
		
		<td align='center'>盗窃车内财物</td>
		<td align='center'>26</td>
		<td align='center'>50</td>
		<td align='center'>-78%</td>
		<td align='center'>15</td>
		<td align='center'>100%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第十行 -->
		
		
		<td align='center'>诈骗</td>
		<td align='center'>45</td>
		<td align='center'>42</td>
		<td align='center'>2.5%</td>
		<td align='center'>58</td>
		<td align='center'>15%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第十一行 -->
		<td align='center' colspan='3'>其他刑事案件</td>
		
		<td align='center'>2</td>
		<td align='center'>1</td>
		<td align='center'>100%</td>
		<td align='center'>10</td>
		<td align='center'>-90%</td>
	</tr>
	<tr height=20px style='line-height:24px;'><!-- 第十二行 -->
		<td align='center' colspan='3'>刑事案件总数</td>
		
		<td align='center'>268</td>
		<td align='center'>283</td>
		<td align='center'>7.90%</td>
		<td align='center'>283</td>
		<td align='center'>-2.37%</td>
	</tr>
</table>
</body>
</html>

### CSS 中 `colspan` 和 `rowspan` 的用法 #### 表格中的单元格扩展 在 HTML 表格中,`colspan` 属性用于定义某个单元格跨越多列,而 `rowspan` 属性则用于定义某个单元格跨越多行。这种功能可以用来创建更复杂的表格布局。 #### 使用 `colspan` 当需要让一个单元格占据多个水平方向上的列时,可以通过设置 `<td>` 或 `<th>` 标签的 `colspan` 属性来实现。例如: ```html <table border="1"> <tr> <td colspan="2">跨两列</td> <!-- 这个单元格会横跨两个列 --> </tr> <tr> <td>1-1</td> <td>1-2</td> </tr> </table> ``` 上述代码展示了如何通过 `colspan` 让第一个单元格覆盖两列[^1]。 #### 使用 `rowspan` 如果希望某一个单元格能够垂直延伸并占用多行,则可以使用 `rowspan` 属性。下面是一个例子: ```html <table border="1"> <tr> <td rowspan="2">跨两行</td> <!-- 此单元格会在竖直方向上占两行 --> <td>1-2</td> </tr> <tr> <td>2-2</td> </tr> </table> ``` 在这个实例里,左侧的第一个单元格因为设置了 `rowspan="2"` 而占据了两行的高度。 #### 结合样式调整视觉效果 为了使带有 `colspan` 或者 `rowspan` 的表格看起来更加美观整齐,通常还会配合一些简单的 CSS 来优化其外观。比如给所有的边框加上统一的颜色以及去掉默认间隙等操作都可以提升用户体验: ```css <style> table { width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: center; } .wide-cell { background-color: lightblue; } </style> <table> <thead> <tr> <th>Name</th><th>Age</th><th>Hobby</th> </tr> </thead> <tbody> <tr> <td class="wide-cell" rowspan="2">Alice</td><!-- Alice's name spans two rows --> <td>25</td> <td>Gardening</td> </tr> <tr> <td>Reading</td> </tr> <tr> <td colspan="3" style="background-color:pink;">This cell spans all three columns.</td> </tr> </tbody> </table> ``` 这里不仅应用了之前提到的基础属性,还加入了额外的类名 `.wide-cell`, 并且利用颜色区分不同的区域[^2]。 #### 响应式设计下的注意事项 对于现代网页开发来说,在移动设备或者屏幕尺寸较小的情况下保持良好的可读性和可用性非常重要。因此有时可能还需要考虑固定头部滚动主体内容的情况。这可以通过纯 CSS 实现如下所示的效果[^3]: ```css .scrollable-table-container { max-height: 200px; /* 设置容器最大高度 */ overflow-y: auto; /* 添加纵向滚动条 */ } .fixed-header-footer-table tbody tr:first-child, .fixed-header-footer-table tfoot tr:last-child { position: sticky; top: 0; /* 将顶部冻结 */ } ``` 以上方法可以帮助解决数据量大但是展示空间有限的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值