html table 表格行合并列合并

客官°小女子只卖身不卖艺 2021-09-03 10:48 815阅读 0赞

**目录**

1.表格边框合并

2、行合并

3、列合并

--------------------

表格：table

行：tr

列：td

属性：

border:边框

width：宽

height：高

bordercolor:变宽颜色

cellspacing:单元格与单元格之间的距离

cellpadding:单元格与内容之间的距离

align:水平的对齐方式，left|center|right

### 1.表格边框合并 ###

cellspacing="0"

<table border="1" width="300" height="200" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
    	<tr>
    		<td align="center">1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    	<tr>
    		<td>21</td>
    		<td>22</td>
    		<td>23</td>
    	</tr>
    </table>

### **2、行合并** ###

<table border="1" width="600" height="300" cellspacing="0">
    	<tr>
    		<td></td>
    		<td></td>
    		
    		<td rowspan="3"></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    </table>

### 3、列合并 ###

<table border="1" width="600" height="300" cellspacing="0">
    	<tr>
    		
    		<td></td>
    		<td colspan="2"></td>
    		
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    </table>

发表评论取消回复

表情：

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

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

相关阅读

相关 Element UI Table合并行

Vue使用Element-ui Table 合并行，官方只是一个非常简单的合并例子，通常业务都是以某个字段进行合并。效果图 ![在这里插入图片描述][watermar

￡神魔★判官ぃ/ 2023年01月14日 11:59/ 0 赞/ 138 阅读

相关【Bootstrap Table】表格列合并 && 设置表格内容为勾选框

效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Ro

心已赠人/ 2022年12月11日 09:27/ 0 赞/ 601 阅读

相关 element表格动态行合并

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

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

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

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

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

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

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

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

相关 el-table自定义合并行或列

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2022年09月02日 01:09/ 0 赞/ 191 阅读

相关合并表格第一列

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

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

相关 Antd表格之行/列合并

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

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

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

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

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

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

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

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