<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <ol>

     <li>基本表格</li>

     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">

         <tr>

             <td>1.1</td>

             <td>1.2</td>

             <td>1.3</td>

         </tr>

         <tr>

             <td>2.1</td>

             <td>2.2</td>

             <td>2.3</td>

         </tr>

         <tr>

             <td>3.1</td>

             <td>3.2</td>

             <td>3.3</td>

         </tr>

     </table>

     <br/>

     <li>表格合并列</li>

     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">

         <tr>

             <td colspan="3" >1.1</td>

             <!--<td>1.2</td>-->

             <!--<td>1.3</td>-->

         </tr>

         <tr>

             <td>2.1</td>

             <td>2.2</td>

             <td>2.3</td>

         </tr>

         <tr>

             <td>3.1</td>

             <td>3.2</td>

             <td>3.3</td>

         </tr>

     </table>

     <br/>

     <li>表格合并行</li>

     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">

         <tr>

             <td  rowspan="3">1.1</td>

             <td>1.2</td>

             <td>1.3</td>

         </tr>

         <tr>

             <!--<td>2.1</td>-->

             <td>2.2</td>

             <td>2.3</td>

         </tr>

         <tr>

             <!--<td>3.1</td>-->

             <td>3.2</td>

             <td>3.3</td>

         </tr>

     </table>

     <br/>

     <li>复杂表格</li>

     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">

         <tr>

             <td >1.1</td>

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

             <!--<td>1.3</td>-->

         </tr>

         <tr>

             <td >2.1</td>

             <td rowspan="2">

                 2.2

                 <br/>

                 3.2

             </td>

             <td>2.3</td>

         </tr>

         <tr>

             <td>3.1</td>

             <!--<td>3.2</td>-->

             <td>3.3</td>

         </tr>

     </table>

     <br/>

 </ol>

 </body>

 </html>

效果如下：

小注：

Html table 合并单元格的更多相关文章

  1. css table 合并单元格

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

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

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

  3. table合并单元格

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

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

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

  5. BootStrap Table 合并单元格

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

  6. 一种HTML table合并单元格的思路

    /** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...

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

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

  8. JQuery Table 合并单元格-解决Bug版本

    网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...

  9. table合并单元格 colspan（跨列）和rowspan（跨行）

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

随机推荐

  1. WebSocket和kafka实现数据实时推送到前端

    一. 需求背景      最近新接触一个需求,需要将kafka中的数据实时推送到前端展示.最开始想到的是前端轮询接口数据,但是无法保证轮询的频率和消费的频率完全一致,或造成数据缺失等问题.最终确定用利 ...

  2. java中的各种流（老师的有道云笔记）

    内存操作流-字节 之前的文件操作流是以文件的输入输出为主的,当输出的位置变成了内存,那么就称为内存操作流.此时得使用内存流完成内存的输入和输出操作. 如果程序运行过程中要产生一些临时文件,可采用虚拟文 ...

  3. canvas——随机生成迷宫

    先上图. 效果 代码 随机生成迷宫要求任意两点都能够找到相同的路径,也就是说,迷宫是一个连通图.随机生成迷宫可以使用普里姆算法.广度优先算法.深度优先算法等实现.这里将使用普里姆算法通过生成最小数的方 ...

  4. python中xrange用法分析

    本文实例讲述了python中xrange用法.分享给大家供大家参考.具体如下: 先来看如下示例: >>> x=xrange(0,8) >>> print x xra ...

  5. SQL Server AG集群启动不起来的临时自救大招

    SQL Server AG集群启动不起来的临时自救大招 背景 前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群 结果重启WSFC集群之后,非但没有好转,导 ...

  6. 【论文：麦克风阵列增强】Signal Enhancement Using Beamforming and Nonstationarity with Applications to Speech

    作者:桂. 时间:2017-06-06 13:25:58 链接:http://www.cnblogs.com/xingshansi/p/6943833.html 论文原文:http://pan.bai ...

  7. springmvc 之 helloworld

    构建SPRINGMVC主要分为几个部分(大体方式为创建并配置2个XML文件.一个JAVA文件及一个JSP文件). 一.创建动态JAVA WEB项目  //创建项目并导入JAR包. 二.创建并配置ser ...

  8. JavaScript Trick

    JavaScript 判断 一个元素 是否在 数组中 : indexOf 原理 : array.indexOf(item) 如果 item 不在 array 中 , 则返回 -1 ; 如果 item ...

  9. Akka（9）： 分布式运算：Remoting-远程构建式

    上篇我们讨论了Akka-Remoting.我们说Akka-Remoting是一种点对点的通讯方式,能使两个不同JVM上Akka-ActorSystem上的两个Actor之间可以相互沟通.Akka-Re ...

  10. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...