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. std::string格式化输入输出

    在C语言中: C函数有sprintf函数, 比较方便, 但是需要知道所需要的内存空间是多少. 在C++的框架MFC中: 在MFC中CString 有Format函数来格式化字符串. 很方便. 难过的是 ...

  2. php知识点(基本上文档都有，只为方便记忆)

    类型转换 (unset)转换为NULL (binary) 转换和 b 前缀转换支持为 PHP 5.2.1 新增   转换二进制 隐藏php后缀名 AddType application/x-httpd ...

  3. javascript中的计算题

    一.js中的数据类型共六种: 值类型五种:Boolea   Number  String  Null  undefined 引用类型:Object ----三大引用类型:Object   Array  ...

  4. 数据库连接池c3p0

    XML配置文件: <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <!- ...

  5. Idea中修改servlet模板

    1.点击左上角的File: Setting --> Editor --> File and Code Templates --> Other --> web -->Ser ...

  6. Python基础（二）数据类型

    (一)数字 Python3中的数字类型分为3种,分别是整型,浮点型以及复数. Python2种的数字类型分为4种,分别是整型,长整型,浮点型以及复数. 其中长整型时Python2为应对位数较大的而设置 ...

  7. eas之获取不同类型的组织视图

    OrgViewF7 orgF7=new OrgViewF7(this);orgF7.setCurrentCUID(company.getId().toString());orgF7.setMultiS ...

  8. 【剑指Offer】4、重建二叉树

      题目描述:   输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列 ...

  9. ext4的一些特性

    delalloc介绍 delalloc是ext4下的一个新特性,延迟分配技术Delay Allocation. 实现原理为: Buffer Write时数据会被保存到page cache中,但是系统并 ...

  10. 51nod1256 乘法逆元【扩展欧几里得】

    给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K * M % N = 1,如果有多个满足条件的,输出最小的. Input 输入2个数M, N中间用 ...