<!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. Java线程间通信

    1.由来 当需要实现有顺序的执行多个线程的时候,就需要进行线程通信来保证 2.实现线程通信的方法 wait()方法: wait()方法:挂起当前线程,并释放共享资源的锁 notify()方法: not ...

  2. GPU编程-Thread Hierarchy（3）

    1. 如果处理的数据是二维的或者三维的,应该怎么办呢? 针对的,我们可以按照二维或者三维的方式,组织线程.老规矩,先代码.后解释 // Kernel definition __global__ voi ...

  3. [原创]adb使用教程v1.0-----by-----使用logcat快速抓取android崩溃日志

    原文再续,书接上回:<使用logcat快速抓取android崩溃日志>中提到的工具包可以下载拉~ <使用logcat快速抓取android崩溃日志>:http://www.cn ...

  4. OWIN的概念初接触

    OWIN这个词我昨天才认识,一直疑惑它是个什么东西,通过一定量的研究,得到一个初步的认识,留个脚印. OWIN是什么 OWIN是一个规范和标准,旨在阐述web服务器和web应用应该如何去解耦,它使得原 ...

  5. Vue 爬坑之路（二）—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  6. java 多线程基础

    线程是进程内的执行单元,进程当中都有若干个线程. 通常主线程或进程是阻塞式的按顺序执行的,如果希望异步执行些子任务,而不要阻塞当前线程的执行,即需要创建子线程,子线程创建后主线程可以等待它们的结果,得 ...

  7. Tenacity——Exception Retry 从此无比简单

    Python 装饰器装饰类中的方法这篇文章,使用了装饰器来捕获代码异常.这种方式可以让代码变得更加简洁和Pythonic. 在写代码的过程中,处理异常并重试是一个非常常见的需求.但是如何把捕获异常并重 ...

  8. 使用websocket-sharp来创建c#版本的websocket服务

    当前有一个需求,需要网页端调用扫描仪,javascript不具备调用能力,因此需要在机器上提供一个ws服务给前端网页调用扫描仪.而扫描仪有一个c#版本的API,因此需要寻找一个c#的websocket ...

  9. wildfly与mysql数据库连接问题

    wildfly报错: Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link f ...

  10. 用nrm一键切换npm源

    当使用官方npm源安装各种包比较慢的时候,建议修改npm源地址 查看npm源地址,在终端输入以下命令 npm config list 会看到官方的npm源 metrics-registry = &qu ...