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. Electron结合React开发环境遇到的问题

    链接 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron 当在React中使用require('electron')时就会报TypeEr ...

  2. <aop:aspectj-autoproxy />

    通过配置织入@Aspectj切面 虽然可以通过编程的方式织入切面,但是一般情况下,我们还是使用spring的配置自动完成创建代理织入切面的工作. 通过aop命名空间的<aop:aspectj-a ...

  3. 【Hexo】deploy出错的解决方法

    .ERROR Deployer not found: git 执行npm install hexo-deployer-git --save .$ hexo d INFO Deploying: git ...

  4. （转）C#开发微信门户及应用(4)--关注用户列表及详细信息管理

    http://www.cnblogs.com/wuhuacong/p/3695213.html 在上个月的对C#开发微信门户及应用做了介绍,写过了几篇的随笔进行分享,由于时间关系,间隔了一段时间没有继 ...

  5. uni-app判断各大平台的语法

    uni-app是一款强大的前端框架,它除了pc端其他都可以实现,打包原生app.手机h5页面,微信小程序, 但是有一个问题就是本生的app和微信小程序是有一定的区别的,因为app有标题栏,返回键,而微 ...

  6. 【剑指Offer】47、求1+2+3+4+···+n

      题目描述:   求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C).   解题思路:   本题本身没有太多 ...

  7. 1.1、配置Python虚拟环境

    安装虚拟环境 系统:CentOS 7.2 python版本:Python 2.7.5 1.虚拟环境介绍 虚拟环境是Python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装 ...

  8. 11、mybatis的映射xml中参数类型的别名

    在mapper.xml中,定义很多的statement,statement需要parameterType指定输入参数的类型.需要resultType指定输出结果的映射类型. 如果在指定类型时输入类型全 ...

  9. Python中对两种utf-8格式的理解

    1.python文件开头utf-8格式的理解 2.程序中读取文件时utf-8格式的理解 aa.py文件代码示例: #!/usr/bin/python # -*- coding:utf-8 -*- fr ...

  10. 用JMeter作WebService接口功能测试（可以借助SoapUI来完成）

    SoapUI里面的操作: Wsdl文件或链接导入或添加到SoapUI打开待测请求:运行请求:取URL  SOAPAction .报文. JMeter里面的操作: 为线程组添加SOAP/XML-RPC ...