【用colspan,rowspan属性上下合并单元格,cellspacing,cellpadding设置间距】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>用colspan,rowspan属性上下合并单元格</title>
</head>
<body>
<table width="400px" border="1" align="center" cellspacing="1" cellpadding="50">
    <tr>
        <td rowspan="2">A1<br>B1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td colspan="2" align="center">B2</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
</table>
</body>
</html>

页面效果如下：

时间： 2024-10-10 13:33:11

【用colspan,rowspan属性上下合并单元格,cellspacing,cellpadding设置间距】的相关文章

gridControl根据值合并单元格

在DevExpress中GridControl中纵向合并单元格只需要设置this.gridView1.OptionsView.AllowCellMerge = true;列默认是可合并的,若设置某列不可合并可设置该列为this.gridColumn1.OptionsColumn.AllowMerge = DevExpress.Utils.DefaultBoolean.False; private void grvDetail_CellMerge(object sender, CellMergeE

table合并单元格 colspan（跨列）和rowspan（跨行）

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

html合并单元格

在合并的首位置加上colspan或者rowspan属性即可 code: <html> <body> <h4>横跨两列的单元格:</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates<

Javascript横向/纵向合并单元格TD

在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1 JOB TOTAL SAL INDEX EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO 1 ANALYST 6000 1 7788 SCOTT ANALYST 7566 4/19/1987 3000.00 20 1 ANALYST 6000 2 7902 FORD ANALYST 7566 12/3/1981

Bootstrap mergeCells合并单元格（多列）

/** 合并单元格 @param target 目标表格对象 @param data 原始数据(在服务端完成排序) @param fieldName 合并参照的属性名称 @param fieldList 要合并的字段集合[不含fieldName]![] @param colspan 合并开始列*/function mergeCells(target, data, fieldName, fieldList, colspan) {// 声明一个map计算相同属性值在data对象出现的次数和var s

bootstrap table合并单元格（该版本是简单的应用）

//获取列表数据 function loadTableData(tableId, request, data) { $.ajax({ type : "GET", url : request, contentType : 'application/json', dataType : "json", data : data, success : function(json) { //从后台获取到数据后进行表格的渲染 $('#featureBusinessClassify

Datatables js 复杂表头合并单元格

x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊... 后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!! 先上

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

easyui 自动动态合并单元格

.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("grid","supply_fullname,in_supply,in_no,in_sales"); } } function mergeCellsByField(tableID, colList) { //alert(tableI