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

以下是對table標簽的結構與合並單元格的實現方法進行了詳細的分析介紹需要的朋友可以過來參考下  

　　<table>標簽的結構
示例代碼

復制代碼 代碼如下:
 <table border="">
      <caption>信息統計表</caption>
       <thead>
       <tr >
       <th>#</th>
       </tr>
      </thead>
      <tbody>
       <tr>
       <td></td>
       </tr>
       <tr>
       <td></td>
       </tr>
       <tr>
       <td></td>
       </tr>
       <tr>
       <td></td>
       </tr>
      </tbody>
</table>

　　
一個完整的例子

復制代碼 代碼如下:
 <table border="">
      <caption class="textcenter">信息統計表</caption>
      <thead>
              <tr >
               <th>#</th>
               <th>Firstname</th>
               <th>Lastname</th>
               <th>Phone</th>
               <th>QQ</th>
              </tr>
      </thead>
      <tbody>
            <tr class="error">
             <td></td>
             <td>qian</td>
             <td>shou</td>
             <td></td>
             <td></td>
            </tr>
            <tr class="warning">
             <td></td>
             <td>qian</td>
             <td>shou</td>
             <td></td>
             <td></td>
            </tr> 
            <tr class="info"> <td></td>
             <td>qian</td>
             <td>shou</td>
             <td></td>
             <td></td>
            </tr> 
            <tr class="success">
                    <td></td>
             <td>qian</td>
             <td>shou</td>
             <td></td>
             <td></td>
            </tr> 
      </tbody>
</table>

　　


合並上下的單元格（rowspan）
示例代碼

復制代碼 代碼如下:
<table border="">
      <caption class="textcenter">信息統計表</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=""></td>
       <td>qian</td>
       <td>shou</td>
       <td></td>
       <td></td>
       </tr> <tr class="warning">
       <td>qian</td>
       <td>shou</td>
       <td></td>
       <td></td>
       </tr> <tr class="info"> <td></td>
       <td>qian</td>
       <td>shou</td>
       <td></td>
       <td></td>
       </tr> <tr class="success"> <td></td>
       <td>qian</td>
       <td>shou</td>
       <td></td>
       <td></td>
       </tr> 
      </tbody>
</table>

　　


合並左右的單元格（colspan）
示例代碼

復制代碼 代碼如下:
<table class="table tablecondensed tablebordered">
  <caption class="textcenter">信息統計表</caption>
    <thead>
      <tr >
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Phone</th>
      <th>QQ</th>
      </tr>
    </thead>
  <tbody>
    <tr class="error">
    <td></td>
    <td colspan=""><p class="textcenter">這是合並了四個單元格</p></td>
    </tr>
    <tr class="warning">
    <td></td>
    <td>qian</td>
    <td>shou</td>
    <td></td>
    <td></td>
    </tr>
    <tr class="info">
    <td></td>
    <td>qian</td>
    <td>shou</td>
    <td></td>
    <td></td>
    </tr>
    <tr class="success">
    <td></td>
    <td>qian</td>
    <td>shou</td>
    <td></td>
    <td></td>
    </tr>
  </tbody>
</table>

　　

From:http://tw.wingwit.com/Article/program/PHP/201311/20979.html