[宜配屋]听图阁

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

yipeiwu_com4年前PHP代码库
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>

返回列表

上一篇：Python字符转换

下一篇：PHP生成静态页面详解

相关文章

详解PHP中的PDO类

 简介 咱一起来看看PDO类。PDO是PHP Data Objects的缩写，它被描述为“在PHP中访问数据库的轻量级，兼容性的接口”。尽管它的名字不咋好听，但PDO是一个在P...

PHP面向对象分析设计的经验原则

(1)所有数据都应该隐藏在所在的类的内部。 (2)类的使用者必须依赖类的共有接口，但类不能依赖它的使用者。 (3)尽量减少类的协议中的消息。 (4)实现所有类都理解的最基本公有接口[例如...

PHP里8个鲜为人知的安全函数分析

本文实例讲述了PHP里8个鲜为人知的安全函数。分享给大家供大家参考。具体分析如下： 安全是编程非常重要的一个方面。在任何一种编程语言中，都提供了许多的函数或者模块来确保程序的安全性。在现...

PHP调用Linux的命令行执行文件压缩命令

前几天工作中，需要将3个txt文件，打包成*.zip down到本地…… 一开始，我和普通青年一样，想到用PHP内置的 ZipArchive，代码看起来应该是这样的： 复制代码 代码如下...

PHP实现的oracle分页函数实例

本文实例讲述了PHP实现的oracle分页函数。分享给大家供大家参考，具体如下： mysql有limit，分页的时候，我们可以用limit 30,40,而oracle没有limit，用其...

© YiPeiWu.com 【听图阁】 粤ICP备17031333号

Powered By Z-BlogPHP. Theme by TOYEAN.