CSS布局實例：一個不錯的表格樣式_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      


						　　今天在藍色看到一個表格的設計圖，于是自己動手做了效果，雖然沒有達到圖中的效果，但也算不錯了！

       代碼調試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運行查看效果 ]

      HTML代碼：

      示例代碼 [www.wf0088.com]
      <table width="590" cellspacing="1">
       <caption>
        text
       </caption>
       <thead>
      <tr>
      <th class="line1" scope="col">text</th>
      <th scope="col">text</th>
      <th scope="col">text</th>
      <th class="line4" scope="col">More</th>
      </tr>
      </thead>
       <tbody>
      <tr>
      <th height="78">text text text text</th>
      <td>text text text text</td>
      <td>text text text</td>
      <td class="line4"> </td>
      </tr>
       </tbody>
       <tfoot>
      <tr>
      <th></th>
      <td></td>
          <td></td>
          <td></td>
      </tr>
      </tfoot>
      </table>

      CSS代碼：

      示例代碼 [www.wf0088.com]
      body{background-color:#D5DFE9;}
      table{border-spacing:1px; border:1px solid #A2C0DA;}
      td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
      thead tr th{background:#B0D1FC;border:1px solid white;}
      thead tr th.line1{background:#D3E5FD;}
      thead tr th.line4{background:#C6C6C6;}
      tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
      tbody tr td.line4{background:#D5D6D8;}
      tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
      caption,tfoot{display:none;}
      




      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-06-03


      

      



      


      



      相關DIV+CSS實例：