您当前的位置: 首页 > 网站编程 > PHP教程 > table标签的结构与合并单元格的实现方法

table标签的结构与合并单元格的实现方法

作者:不详 来源:网络 发布时间: 2014-08-18 11:58 点击:
以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍,需要的朋友可以过来参考下 1.table标签的结构 示例代码: 复制代码 代码如下: table border=1 caption信息统计表/caption thead tr th#/th /tr /thead tbody tr td1/td /tr tr td2/td /tr tr td3/

table标签的结构与合并单元格的实现方法

  以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍,需要的朋友可以过来参考下

  1.<table>标签的结构

  
示例代码:

  复制代码 代码如下:

  <table border="1">

    <caption>信息统计表</caption>

     <thead>

     <tr >

     <th>#</th>

     </tr>

    </thead>

    <tbody>

     <tr>

     <td>1</td>

     </tr>

     <tr>

     <td>2</td>

     </tr>

     <tr>

     <td>3</td>

     </tr>

     <tr>

     <td>4</td>

     </tr>

    </tbody>

  </table>

  一个完整的例子:

  复制代码 代码如下:

  <table border="1">

  <caption class="text-center">信息统计表</caption>

  <thead>

    <tr >

     <th>#</th>

     <th>Firstname</th>

     <th>Lastname</th>

     <th>Phone</th>

     <th>QQ</th>

    </tr>

  </thead>

  <tbody>

    <tr class="error">

     <td>1</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

    </tr>

    <tr class="warning">

     <td>2</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

    </tr>

    <tr class="info"> <td>3</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

    </tr>

    <tr class="success">

        <td>4</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

    </tr>

  </tbody>

  </table>

  


  

  2.合并上下的单元格(rowspan)

  
示例代码:

  复制代码 代码如下:

  <table border="1">

    <caption class="text-center">信息统计表</caption>

     <thead>

      <tr >

      <th>#</th>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Phone</th>

      <th>QQ</th>

      </tr>

     </thead>

    <tbody>

     <tr class="error">

     <td rowspan="2">1</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

     </tr> <tr class="warning">

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

     </tr> <tr class="info"> <td>3</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

     </tr> <tr class="success"> <td>4</td>

     <td>qian</td>

     <td>shou</td>

     <td>11111111111</td>

     <td>111111111</td>

     </tr>

    </tbody>

  </table>

  


  

  3.合并左右的单元格(colspan)

  
示例代码:

  复制代码 代码如下:

  <table class="table table-condensed table-bordered">

  <caption class="text-center">信息统计表</caption>

  <thead>

  <tr >

  <th>#</th>

  <th>Firstname</th>

  <th>Lastname</th>

  <th>Phone</th>

  <th>QQ</th>

  </tr>

  </thead>

  <tbody>

  <tr class="error">

  <td>1</td>

  <td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>

  </tr>

  <tr class="warning">

  <td>2</td>

  <td>qian</td>

  <td>shou</td>

  <td>11111111111</td>

  <td>111111111</td>

  </tr>

  <tr class="info">

  <td>3</td>

  <td>qian</td>

  <td>shou</td>

  <td>11111111111</td>

  <td>111111111</td>

  </tr>

  <tr class="success">

  <td>4</td>

  <td>qian</td>

  <td>shou</td>

  <td>11111111111</td>

  <td>111111111</td>

  </tr>

  </tbody>

  </table>

  
分享到:
本文"table标签的结构与合并单元格的实现方法"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4