zoukankan      html  css  js  c++  java
  • html表格合并单元格的运用实例

    效果图:

    实现代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    #all {
    1000px;
    height: 100px;
    }

    .biaoge {
    103px;
    height: 100px;
    float: left;
    }
    </style>
    </head>
    <body>
    <div id="all">

    <div class="biaoge">
    <table border="1" cellspacing="0" width="100px" height="100px">
    <tr>
    <td rowspan="2" bgcolor="blue">11</td>
    <td>12</td>
    <td>13</td>
    </tr>
    <tr>

    <td>22</td>
    <td>23</td>
    </tr>
    </table>
    </div>
    <div class="biaoge">
    <table border="1" cellspacing="0" width="100px" height="100px">
    <tr>
    <td colspan="3" bgcolor="blue">11</td>
    </tr>
    <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    </tr>
    </table>
    </div>
    <div class="biaoge">
    <table border="1" cellspacing="0" width="100px" height="100px">
    <tr>
    <td rowspan="2" bgcolor="blue">1</td>
    <td>2</td>
    <td colspan="2" bgcolor="blue">3</td>

    </tr>
    <tr>

    <td>6</td>
    <td>7</td>
    <td>8</td>
    </tr>
    </table>
    </div>
    <div class="biaoge">
    <table border="1" cellspacing="0" width="100px" height="100px">
    <tr>
    <td>A</td>
    <td rowspan="2">B</td>
    <td>C</td>
    </tr>
    <tr>
    <td rowspan="2">E</td>
    <td>D</td>
    </tr>
    <tr>
    <td colspan="2">F</td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    倒计时显示
    Global.asax实现屏蔽ip和图片防盗链
    同一账号不能同时登陆
    javascript中defer的作用
    javascript焦点图
    asp.net自定义分页
    GridVew linkbutton点击时获取点击行label的绑定值
    内存对齐
    深入.NET托管堆(Managed Heap)
    内存对齐1
  • 原文地址:https://www.cnblogs.com/tendo/p/6861727.html
Copyright © 2011-2022 走看看