程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> table標簽的結構與合並單元格的實現方法

table標簽的結構與合並單元格的實現方法

編輯:關於PHP編程
    以下是對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>


    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved