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

yipeiwu_com5年前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>

相关文章

简单谈谈php中的unicode和utf8编码

简单谈谈php中的unicode和utf8编码

重新认识unicode和utf8编码 直到今天,准确的说是刚才,我才知道UTF-8编码和Unicode编码是不一样的,是有区别的囧 他们之间是有一定的联系的,看看他们的区别: UTF-8...

php线性表的入栈与出栈实例分析

本文实例讲述了php线性表的入栈与出栈用法。分享给大家供大家参考。具体如下: <?php $stack = array("Simon", "Elaine"); //定...

PHP面向对象学习笔记之二 生成对象的设计模式

PHP面向对象学习笔记之二 生成对象的设计模式

一. 单例模式(Singleton) 如果应用程序每次包含且仅包含一个对象,那么这个对象就是一单例. 用来替代全局变量. 复制代码 代码如下: <?php require_once...

php横向重复区域显示二法

方法一. 注意这里有一个预先定义的图片记录集rsmpic 要横向重复的就是图片,请根据你的情况改为你的记录集名称.整齐地将横向重复内容放在一个表格内 <table width="1...

PHP获取数组长度或某个值出现次数的方法

本文实例讲述了PHP获取数组长度或某个值出现次数的方法。分享给大家供大家参考。具体分析如下: count():对数组中的元素个数进行统计; 例如: $arr = Array('0',...