colspan和rowspan这两个属性用于创建特殊的表格。

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

在浏览器中将显示如下：

单元格1
单元格2 单元格3 单元格4

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


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

单元格1 单元格2
单元格3 单元格4 单元格5

rowspan的作用是指定单元格纵向跨越的行数。


浏览器中将显示如下：

单元格1 单元格2
单元格3
单元格4

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

综合实例

ss
　 　 　 　
　 　 　 　
　 　 　
　 　
　 　 　 
<html>

<head>

</head>

<table border= "1 "   width= "200 " >

     <tr>

        <td colspan=""  >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=""> 　 </td>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>

     </tr>

     <tr>

        <td   width= "25% "> 　 </td>

        <td   width= "25% " rowspan=""> 　 </td>

        <td   width= "25% "> 　 </td>

     </tr>

     <tr>

        <td   width= "25% " colspan=""  > 　 </td>

        <td   width= "25% "> 　 </td>  

     </tr>

     <tr>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>  

     </tr>

</table>

</html>

table合并单元格 colspan（跨列）和rowspan（跨行）的更多相关文章

  1. <table>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

  2. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  3. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  4. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  5. 【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  6. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. ant design Table合并单元格合并单元格怎么用？

    1.ant design table合并单元格怎么用?

  8. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  9. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

随机推荐

  1. C#调用FFMPEG实现桌面录制（视频+音频+生成本地文件）

    不得不说FFMPEG真是个神奇的玩意,所接触的部分不过万一.网上有个很火的例子是c++方面的,当然这个功能还是用c++来实现比较妥当. 然而我不会c++ 因为我的功能需求比较简单,只要实现基本的录制就 ...

  2. 【C++】四种排序算法的时间比较

    四种排序算法的时间比较 [注]clock函数对输入(用户输入)元素N排序的计时 #include<iostream> #include<time.h> using namesp ...

  3. YTBro Video 2016-07-30 Sat

    明日天气:多云转阴,32~24度 运动向 健身 20中极致疯狂的俯卧撑,新手请勿尝试 跑酷 大神放大招,招招见血,不信你看 赛事 2016年世界室内田径锦标赛 男子4×400接力决赛 台球 RP集中爆 ...

  4. html formData 数据 提交和 .netMVC接收

    <form id="uploadForm" enctype="multipart/form-data"> <input type=" ...

  5. spirngMvc

    配置方式就略了 直接开始注解方式: 1.  新建项目 2.  导入jar包 3.  创建controller,用注解方式声明 4.  在web.xml配置核心分发器DispatcherServlet ...

  6. sql_3 join

    http://www.cnblogs.com/rush/archive/2012/03/27/2420246.html  

  7. 【转】虚拟化（五）：vsphere高可用群集与容错

    vsphere高级功能需要vcenter server和共享存储的支持才能实现.vsphere的高级功能有 vmotion.storage vmotion.vsphere HA.vsphere DRS ...

  8. 模拟人的手指在UI上滑动时3D模型跟随着移动（Unity）

    问题: 怎么让当手指滑动的同时对应的模型发生旋转 解决办法: 1:通过控制摄像机或者模型来实现效果 2:通过获取鼠标移动时X轴Y轴的偏移量来确定模型的旋转角度 3:为了不让人感觉到突兀,建议使用Mat ...

  9. Android 性能测试初探（五）

    书接上文 Android 性能测试初探之 GPU(四) 前文说了的一些性能测试项大家可能都听说,接下来我们聊聊大家不常关注的测试项- 功耗 . 功耗测试主要从以下几个方面入手进行测试 测试手机安装目标 ...

  10. Day 25 面向对象

    面向对象基础 面向对象编程 面向过程编程:类似于工厂的流水线 优点:逻辑清晰 缺点:扩展性差 面向对象编程:核心是对象二字,对象属性和方法的集合体,面向对象编程就是一堆对象交互 优点:扩展性强 缺点: ...