對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
