table的一些屬性

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>

在瀏覽器中的顯示效果以下圖：

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>

colgroup、col 標籤用來定義表格列的分組。
若是一個表格前三列要垂直居上，後兩列垂直居下，咱們就能夠用分組來進行設置。看起來是樣式表能夠代替的功能，但這的確不是多餘的標籤，和前面的標籤同樣，在 XHTML 1.0 Strict 中也是容許的標籤。

<table border="1">
　　<colgroup span="3" valign="top"></colgroup>
　　<colgroup span="2" valign="bottom"></colgroup>
　　<tr>
　　　　<td>1垂直居上</td>
　　　　<td>2垂直居上</td>
　　　　<td>3垂直居上</td>
　　　　<td>4垂直居下</td>
　　　　<td>5垂直居下</td>
　　</tr>
</table>

　　

span 用以表示該組包含多少列。
col 的做用是細化 colgroup，由於即便在一個組中，列與列之間也可能會出現一些差異，這時就得用到 col 了。

<colgroup span="3" valign="top">
　　<col width="50"></col>
　　<col align="center"></col>
　　<col valign="middle"></col>
</colgroup>

 

　　

能夠看到第三列的 valign 覆蓋了 colgroup 的 valign 設置。在這裏 width、align、valign 都是符合 XHTML 1.0 Strict 的，不過要注意的是：沒有 height 屬性。

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>