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. 【Oracle】体系结构

    1. 理解实例和数据库 ☞ 实例是一组后台进程和共享内存 ☞ 数据库是磁盘上存储的数据集合 ☞ 实例“一生”只能装载并打开一个数据库 ☞ 数据库可以由一个或多个实例(RAC)装载和打开 [oracle ...

  2. SQL SERVER2012 安装

  3. 关于OpenCV的Mat画图问题

    由于OpenCV的java版本画图有太多错误,只能自己编写画图的代码,在一个函数中,编写出画圆和深度距离的代码, 代码如下: public int CircleMyMat(Mat Show, Poin ...

  4. 【JSP】常用跳转方式

    原文地址:http://blog.csdn.net/wanghuan203/article/details/8836326 (1)href超链接标记,属于客户端跳转 (2)使用javascript完成 ...

  5. 用cmd查看win8版本 激活等详细信息命令

    Win+x===>选择以管理员身份运行,输入: slmgr /dlv   显示:最为详尽的激活信息,包括:激活ID.安装ID.激活截止日期slmgr /dli 显示:操作系统版本.部分产品密钥. ...

  6. typora与Markdown的一些小问题

    一.typora中修改图像大小 加上style="zoom:50%" <img src="E:\GitHub_learn\blog\source\imgs\tree ...

  7. 【剑指Offer】45、扑克牌顺子

      题目描述:   LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到 ...

  8. 在 CentOS 7 上设置 grub2

    在 CentOS 7 上设置 grub2 1. 开机选单是自动创建出来的 请勿尝试手动编辑开机选单,因为它是按照 /boot/ 目录内的文件自动创建出来的.然而你可以调整 /etc/default/g ...

  9. 分别用for循环，while do-while以及递归方法实现n的阶乘！

    分别用for循环,while do-while以及递归方法实现n的阶乘! 源码: package book;import java.util.Scanner;public class Access { ...

  10. 在 Linux 下判断系统当前是否开启了超线程

    转自: http://www.cnblogs.com/wjoyxt/p/4804293.html #lscpu Thread(s) per core: 2 Core(s) per socket: 6 ...