精通HTML表格的使用

阮一峰發表於2009-05-10

製作網頁表格,需要使用table標籤。

用好table標籤並不容易,複雜的表格做起來就很麻煩,比如下面這張表。

精通HTML表格的使用

我整理了一些HTML表格的高階語法。你可以看看,自己會用多少?

1. 標題和內容描述

表格的標題用caption標籤表示,它會自動出現在整張表格的上方。

除了標題以外,對內容的更長描述可以寫在table標籤的summary屬性中。

程式碼示例(為了便於閱讀,tr、th、td省略關閉標籤):

<table border="1"
  summary="this table gives some statistics about fruit
   flies: average height and weight, and percentage
     with red eyes (for both males and females).">
 <caption><em>a test table with merged cells</em></caption>
 <tr><th rowspan="2"><th colspan="2">average
 <th rowspan="2">red<br>eyes
 <tr><th>height<th>weight
 <tr><th>males<td>1.9<td>0.003<td>40%
 <tr><th>females<td>1.7<td>0.002<td>43%
</table>

在瀏覽器中的顯示效果如下圖:

精通HTML表格的使用

2. 表頭和表尾

從結構上看,表格可以分成表頭、主體和表尾三部分,在HTML語言中分別用thead、tbody、tfoot表示。

程式碼示例:

<table>
<thead>
  <tr> ...header information...
</thead>
<tfoot>
  <tr> ...footer information...
</tfoot>
<tbody>
  <tr> ...first row of block one data...
  <tr> ...second row of block one data...
</tbody>
<tbody>
  <tr> ...first row of block two data...
  <tr> ...second row of block two data...
  <tr> ...third row of block two data...
</tbody>
</table>

這裡有三個注意點:

1)thead和tfoot在一張表中都只能有一個,而tbody可以有多個。

2)tfoot必須出現在tbody前面,這樣瀏覽器在接收主體資料之前,就能渲染表尾,有利於加快表格的顯示速度。這一點對大型表格尤其重要。

3)thead、tbody和tfoot裡面都必須使用tr標籤。

3. 列的分組

tbody可以用來對"行"進行分組,而colgroup則用來對"列"進行分組。

比如,下面的程式碼表示前40列為一組,每列的寬度為20畫素。

  <COLGROUP span="40" width="20">
  </COLGROUP>

span屬性,可以指定colgroup標籤能夠影響到的列數。

在colgroup標籤內部,可以使用col標籤為這一列組中的每一列指定屬性。

比如,下面的程式碼表示列組中每一列的段度為20畫素:

  <COLGROUP>
  <COL width="20">
  <COL width="20">
  ...a total of forty COL elements...
  </COLGROUP>

再比如,如果40列中只有最後一列的樣式不一樣,那就這樣寫,方便在CSS中指定:

  <COLGROUP width="20">
  <COL span="39">
  <COL id="format-me-specially">
  </COLGROUP>

4. CSS中的table-layout語句

這個語句可以用來指定表格顯示的樣式,比如

table { table-layout: fixed }

它可以取三個值:

* auto(預設)
* fixed
* inherit

auto表示單元格的大小由內容決定。fixed表示單元格的大小是固定的,由第一個指定大小的單元格決定;如果所有單元格都沒有指定大小,則由第一個單元格的預設大小決定;如果單元格中的內容超出單元格的大小,則用CSS中的overflow命令控制。微軟公司聲稱使用這個命令,表格的顯示速度可以加快100倍。

順便說一句,為了加快表格顯示,最好事先就在CSS(或者table標籤的width和height屬性)中指定表格的寬度和高度。

5. th和td

表示單元格的標籤是th(table head)和td(table data),前者用來顯示資料的名稱,後者用來顯示資料的內容。

程式碼示例:

 <table border="1">
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
 </table>

這兩個標籤有一些很複雜的屬性,分別是abbr、axis、char、headers和scope,詳細解釋參閱這裡

6. frame和rules

table標籤的frame和rules屬性,可以控制邊框的顯示。frame屬性控制著表格最外圍的四條邊框的可見性,而 rules 則控制著表格內部邊框的可見性。

frame屬性可取的值及含義如下:

* void - 預設值。表示不顯示錶格最外圍的邊框。
* box - 同時顯示四條邊框。
* border - 同時顯示四條邊框。
* above - 只顯示頂部邊框。
* below - 只顯示底部邊框。
* lhs - 只顯示左側邊框。
* rhs - 只顯示右側邊框。
* hsides - 只顯示水平方向的兩條邊框。
* vsides - 只顯示垂直方面的兩條邊框。

rules 屬性可取的值有五個,分別是:

* none - 預設值。無邊框。
* groups - 為行組或列組加邊框。
* rows - 為行加邊框。
* cols - 為列加邊框。
* all - 為所有行列(單元格)加邊框

程式碼示例:

<table border="1" width="600" frame="hsides" rules="groups">
     <caption>My Ultimate Table</caption>
     <colgroup span="1" width="200"></colgroup>
     <colgroup span="3" width="400"></colgroup>

<thead>
     <tr>
          <td>cell 1-1</td>
          <td>cell 1-2</td>
          <td>cell 1-3</td>
          <td>cell 1-4</td>
     </tr>
</thead>
<tfoot>
     <tr>
          <td>cell 4-1</td>
          <td>cell 4-2</td>
          <td>cell 4-3</td>
          <td>cell 4-4</td>
     </tr>
</tfoot>
<tbody>
     <tr>
          <td>cell 2-1</td>
          <td>cell 2-2</td>
          <td>cell 2-3</td>
          <td>cell 2-4</td>
     </tr>
     <tr>
          <td>cell 3-1</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
</tbody>
</table>

在瀏覽器中的顯示效果如下圖:

精通HTML表格的使用

[延伸閱讀]

* HTML 4.0語言中的Table模型

* 理解表格一:圖解frame 和rules 屬性

* 理解表格二:其他表格相關標籤及屬性

(完)

相關文章