Web前端开发技术项目教程课件 3.3.2知识点1表格跨行与跨列操作

表格跨行与跨列操作信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备跨列操作1跨行操作201跨列操作前端技术开发跨列操作前端技术开发01在实际应用中会出现不同大小的区域，那么在编辑表格时，可合并单元格进行跨列或跨行的操作。<td>标记中设置colspan属性定义纵向跨越单元格的数量，即列数。<table>

<tr>

<tdcolspan="value">…</td> …</tr> …</table>跨列colspan<tableborder="1"width="400"height="150"><tralign="center"><tdcolspan="2">1月</td><tdcolspan="2">2月</td></tr><tralign="center"><td>产量</td><td>销量</td><td>产量</td><td>销量</td></tr><tralign="center"><td>200</td><td>100</td><td>150</td><td>80</td></tr></table>跨列操作前端技术开发01注意：第1行上第1个单元格设置跨列操作，即该单元格占据2个单元格空间，为了保持每行列数相同，该行上需要删除1个单元格。第3个单元格与第4个单元格类似。02跨行操作前端技术开发跨行操作前端技术开发02<td>标记中设置rowspan属性定义横跨单元格的数量，即行数。<table><tr> <tdrowspan="value">…</td></tr><tr>…</tr>…</table>跨行rowspan跨行操作前端技术开发02注意：第1行上第1个单元格设置跨行操作，即该单元格占据第2行上的空间，为了保持每行列数相同，第2行也需要删除1个单元格。第3行上第1个单元格类似。<tableborder="1"width="400"height="150"><tralign="center"><tdrowspan="2"></td><tdcolspan="2">1月</td></tr><tralign="center"><td>产量</td><td>销量</td></tr><tralign="center"><tdrowspan="2">A产品</td><td>200</td><td>100</td></tr><tralign="center"><td>150</td><td>80</td></tr></table>跨行操作前端技术开发02注意：第1行上第1个单元格设置跨行跨列操作，即该单元格占据第2行第2列上的空间，然后第2行和第2列上删除对应的单元格。<tableborder="1"width="400"height="150"><tralign="center"><tdrowspan="2"colspan="2">产品及型号</td><tdcolspan="2">1月</td></tr><tralign="center"><td>产量</td><td>销量</td></tr><tralign="center"><tdrowspan="2">A产品</td><td>B型号</td><td>200</td><td>100</td></tr><tralign="center"><td>C型号</td><td>150</td><td>80</td></tr></table>小结前端技术开发03单元格合并方式:跨行合并跨列合并合并单元格流程:首先,确定合并单元格类型,是跨行合并还是跨列合并;然后,根据从上到下,从左到右的顺序,找到要设置rowspan或colspan属性的目标单元格;跨行合并:按照从上到下的顺序进行合并,最上方的单元格是目标单元格;跨列合