HTML 表格中的行合并与列合并

阳光穿透心脏的1/2处 2021-09-12 07:54 630阅读 0赞

``

colspan是横向合并；rowspan是纵向合并。

colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：

<table style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun; font-size:14px; background-color:rgb(138,124,85)"> 
 <tbody> 
  <tr> 
   <td colspan="3" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格1</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格2</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格3</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格4</td> 
  </tr> 
 </tbody> 
</table>

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

该例在浏览器中将显示如下：

<table style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun; font-size:14px; background-color:rgb(138,124,85)"> 
 <tbody> 
  <tr> 
   <td colspan="2" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格1</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格2</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格3</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格4</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格5</td> 
  </tr> 
 </tbody> 
</table>

rowspan的作用是指定单元格纵向跨越的行数。  
  
  
浏览器中将显示如下：

<table style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun; font-size:14px; background-color:rgb(138,124,85)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格1</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格2</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格3</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 单元格4</td> 
  </tr> 
 </tbody> 
</table>

上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。  
   
   
综合实例

<table style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun; font-size:14px; background-color:rgb(138,124,85)"> 
 <tbody> 
  <tr> 
   <td colspan="4" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> ss</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <br> </td> 
  </tr> 
 </tbody> 
</table>

<html>  
<head>  
</head>  
<table border= "1 "   width= "200 " >  
     <tr>  
        <td colspan="4"  >ss  
        </td>  
     </tr>  
     <tr>  
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>   
     </tr>  
     <tr>  
        <td   width= "25% "rowspan="2"> 　 </td>    
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>   
     </tr>  
     <tr>  
        <td   width= "25% "> 　 </td>    
        <td   width= "25% " rowspan="3"> 　 </td>    
        <td   width= "25% "> 　 </td>   
     </tr>  
     <tr>  
        <td   width= "25% " colspan="2"  > 　 </td>    
        <td   width= "25% "> 　 </td>    
  
  
     </tr>  
     <tr>  
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>    
        <td   width= "25% "> 　 </td>    
     </tr>  
</table>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，630人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML- table表格的使用，常见表格标签的使用汇总，表格合并规则，跨行合并与跨列合并

以前表格主要是用来布局、显示数据，随着技术的更新迭代表格布局逐渐被淘汰，现多用于展示数据表格通过 `table` 标签来定义，一个完整的表格包含表格的 `caption`（

客官°小女子只卖身不卖艺/ 2023年08月17日 15:22/ 0 赞/ 131 阅读

相关表格多列合并

要实现的效果 : ![表格合并][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

小鱼儿/ 2023年01月11日 01:09/ 0 赞/ 17 阅读

相关 element表格动态行合并

html代码如下： <el-table :data="tableData" :span-method="objectSpanMethod" border style=

浅浅的花香味﹌/ 2022年12月07日 11:38/ 0 赞/ 353 阅读

相关 Ant Design Vue实现a-table表格单元格合并（列/行合并）

列合并这里先写一个最简单的列合并实现：这个合并的效果图只截了表格的一部分，左边是需要展示的数据。数据是后台返回的，但是最后的合计数据需要计算并合并展示。 ![wa

Bertha 。/ 2022年11月30日 12:34/ 0 赞/ 1422 阅读

相关 View UI （iview）表格合并单元格（行/列合并）

> 有时我们在开发过程中会遇到表格里有合并单元格的需求。 > 今天以View UI （iview）组件库为例。 1. 打开[iview官网-table][iview_-t

约定不等于承诺〃/ 2022年10月14日 11:56/ 0 赞/ 478 阅读

相关合并表格第一列

最近老是遇见第一列是地市，第二列是区县。说一堆区县对应一个地市看起来不太好看，要把第一列的地市合并在一起。故写了个小小的Demo，留待以后复用。先看效果图，表一为原数据效果

深碍√TFBOYSˉ_/ 2022年08月05日 16:17/ 0 赞/ 252 阅读

相关 Antd表格之行/列合并

Antd--表格之行/列合并注意：antd官方行/列合并参考：[https://1x.ant.design/components/table/\components-t

左手的ㄟ右手/ 2022年03月12日 10:35/ 0 赞/ 1809 阅读

相关 HTML 表格中的行合并与列合并

`` colspan是横向合并；rowspan是纵向合并。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用

阳光穿透心脏的1/2处/ 2021年09月12日 07:54/ 0 赞/ 631 阅读

相关 html table 表格行合并列合并

目录 1.表格边框合并 2、行合并 3、列合并 -------------------- 表格：table 行：tr 列：td 属性：

客官°小女子只卖身不卖艺/ 2021年09月03日 10:48/ 0 赞/ 836 阅读

相关 html表格合并单元格

th标签][th] 合并列 colspan="k" 合并行 rowspan="k" 例子《th colspan="2", rowspan="3"》转...

你的名字/ 2021年01月10日 06:51/ 0 赞/ 817 阅读