html中關於表格標簽的理解和使用


  對table表格標簽的深入理解

  表格目前已經不用來進行頁面布局,更多的是用來顯示表格數據,其本身就擁有較多的標簽,加上css設置表格樣式,以及javascript動態創建表格時也比較復雜,所以更應該透徹的理解html表格標簽的意義。

  (一)表格基本結構標簽

    <table></table>:定義表格

     <th></th>:定義表格的標題欄

     <tr></tr>:定義表格的行

    <td></td>:定義表格的列

  使用這幾個標簽就可以創建出最基本的表格結構:

  如下代碼就可以創建出一個三行三列的簡單表格

 1 <body>
 2     <table>    <!-- 定義表格 -->
 3             <tr> <!-- 第一行 -->
 4                 <th>姓名</th>    <!-- 三列 -->
 5                 <th>年級</th>
 6                 <th>學號</th>
 7             </tr>
 8             <tr>
 9                 <td>周時</td>
10                 <td></td>
11                 <td>01</td>
12             </tr>
13    </table>
14 </body>

  (二)邏輯結構標簽 

    <caption>:定義表格標題

    <thead>:定義表格頁眉

    <tbody>:定義表格主體

    <tfoot>:定義表格頁腳

    <col>:用來給表格中的一列或者多列設置屬性

    <colgroup></colgroup>:用來表示表格的列組,更方便的一次性給表格設置樣式

   使用表格的邏輯標簽,使表格可讀性更強,設置樣式時也更加方便,示例代碼如下:

 1 <body>
 2     <table>
 3         <caption>表格標題</caption>
 4         <colgroup>   <!-- 用來存放列組 -->
 5             <col span=2>    <!-- 控制第一列和第二列 -->
 6             <col span=1>    <!-- 第三列 -->
 7          /*<col>不添加span屬性,默認一列,以在colgroup中的順序為准*/
 8         </colgroup>
 9         <thead>        <!-- 表頭 -->    
10             <tr>
11                 <th>姓名</th>
12                 <th>年級</th>
13                 <th>學號</th>
14             </tr>
15         </thead>
16         <tbody>        <!-- 表格的中間部分 -->
17             <tr>
18                 <td>周時</td>
19                 <td></td>
20                 <td>01</td>
21             </tr>
22         </tbody>
23         <tfoot>        <!-- 表格的底部 -->
24             <tr>
25                 <td>小石</td>
26                 <td></td>
27                 <td>03</td>
28             </tr>
29         </tfoot>
30     </table> 

  

  在給標簽添加結構化標簽后,表格可讀性大大增強。關於<col>和clogroup標簽需要注意以下兩點:

  1、<col>:用來為表格中的一列或者多列設置屬性,span屬性用來控制列數。<col>標簽只能在<table>元素或者<colgroup>元素內部使用.

  2、<clogroup>標簽的唯一作用是用來存放col標簽。

  更多關於表格設計的樣式,請訪問http://www.cnblogs.com/zhouyanlife/p/8673593.html

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM