1.说明

rowspan：跨行
colspan：跨列
用于设计复杂的表格


2.例子
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

table, tr, td{

    border:2px solid pink;

    border-collapse:collapse;

}

td{

    width:200px;

    height:60px;

}

</style>

</head>

<body>

    <table>

        <tr>

            <td colspan="2"></td>

            <td rowspan="2"></td>

        </tr>

        <tr>

            <td rowspan="2"></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

输出结果：

   
   
   

rowspan和colspan的更多相关文章

  1. C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

    Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...

  2. rowspan和colspan的区别粗解

    rowspan和colspan是我们初学HTML表格中会在做一些特殊表格中遇到.其常在td中添加. rowspan的作用是指定纵向所跨越单元格的行数. 如下效果. colspan的作用是指定单元格横向 ...

  3. How to use rowspan and colspan in tbody using datatable.js?

    https://stackoverflow.com/questions/27290693/how-to-use-rowspan-and-colspan-in-tbody-using-datatable ...

  4. 【HTML】Intermediate4：Tables:rowspan and colspan

    1.</th> header cell As with td elements,these must be enclosed inside tr elements 2.</tr co ...

  5. html中的rowspan和colspan

    摘自w3school(http://www.w3school.com.cn/tags/att_td_colspan.asp)colspan 属性规定单元格可横跨的列数.<table border ...

  6. html的rowspan和colspan

    https://www.jb51.net/article/165695.htm rowspan工具 https://blog.csdn.net/oxiaobaio/article/details/80 ...

  7. HTML表格跨行、跨列操作(rowspan、colspan)

    转自:https://blog.csdn.net/u012724595/article/details/79401401 一般使用<td>元素的colspan属性来实现单元格跨列操作,使用 ...

  8. IE下默认TD colspan rowspan值为1

    IE下默认TD colspan rowspan值为1,即使这个TD没有合并没有rowspan,colspan属性,其值都为1,chrome下正常. 判断是否rowspan colspan为TD.get ...

  9. JS table内容转成二维数组，支持colspan和rowspan

    思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...

随机推荐

  1. IOS Dictionary和Model相互转换

    // // HYBJSONModel.h // Json2ModelDemo // // Created by huangyibiao on 14-9-15. // Copyright (c) 201 ...

  2. [转] Nginx模块开发入门

    前言 Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%.与Apache相比,Nginx在高并 ...

  3. JDK5-自动拆装箱

    拆装箱:在基本类型与其对应的引用类型之间转换 装箱:Integer iObj = 5; 拆箱:int i = 5 + iObj; 装箱时,一个字节以内的数据在一个常量池中(小整数的使用频率高),即-1 ...

  4. Android 系统移植与驱动开发--第二章搭建Android环境核心步骤及心得

    第二章 搭建Android 开发环境 虽然在这一章中讲的是Android底层开发环境,但是相应伴随的还有Android NDK程序来测试Linux驱动,HAL程序库.底层开发不仅需要交叉编译环境,还要 ...

  5. Retrofit2 简介 语法 案例

    简介 官网:http://square.github.io/retrofit/ GitHub:https://github.com/square/retrofit/ compile 'com.squa ...

  6. js异步的理解---千呼万唤始出来啊!

    编译完成后(先分配给变量空间和function(){}命名的函数,var = function(){}这种函数也仅仅只是分配了个空间,还没有赋值个函数给他!),调用了若不是undefined就执行, ...

  7. Objective-C学习篇02—封装

    面向对象的三大特性:封装.继承和多态 封装目的就是将数据隐藏起来,外界只能通过这个类的方法(接口)才能访问或者设置里面的数据,不可以在外部直接修改或者访问里面的数据,通常使用方法来达到封装一个类的目的 ...

  8. IOS改变状态栏样式

    1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...

  9. WPF Binding

    winform有binding, WPF也有binding,区别在哪呢?这里暂时不提.以前也检查接触WPF binding, 但为什么过段时间就忘记了呢? 可能主要原因自己的知识体系不够完善吧,下面我 ...

  10. 汇编程序w=x*y+z-200

    DATA   SEGMENTX      DW  1000Y      DW  2000Z      DW  3000W      DW  2 DUP(?)DATA   ENDSCODE   SEGM ...