HTML Table

HTML Table

This document is copyrighted and provided as is. You are welcomed to use it for non-commercial purpose.
看其他教材

---

• Table 的組成元件:
  1. <table> </table>: 宣告表格
  2. <caption> </caption>: 表格標題 (Optional)
  3. <th> </th>: 表格欄位標題 (Optional)
  4. <tr> </tr>: 表格列
  5. <td> </td>: 表格欄
• 第一個表格:

  老呂

  <table>
  <tr>
  <td>老呂</td>
  </tr>
  </table>
  

• 比較像表格的表格:

  老呂
  	老黃

  <table border="2">
  <tr>
  <td>老呂</td><td>&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td><td>老黃</td><td></td>
  </tr>
  <table>

• 做點修飾:

  老呂
  	老黃

  <table border="5" width="300" height="200" bgcolor="yellow">
  <tr>
  <td>老呂</td><td>&nbsp</td><td>&nbsp</td>
  </tr>
  <tr bgcolor="#3366FF" align="right" valign="bottom">
  <td bgcolor="green">&nbsp</td><td>老黃</td><td>&nbsp;</td>
  </tr>
  <table>
  

• 有標題與跨列或欄的表格:

  A more complex table with row/column span, header, and caption.

  	部別
  	四技	二技	研究所
  86學年度	400	208	10
  87學年度	400	200	15

  <table border width="75"%>
  <tr>
  <th rowspan="2"></th><th colspan="3">部別</th>
  </tr>
  <tr>
  <th>四技</th><th>二技</th><th>研究所</th>
  </tr>
  <tr>
  <th>86學年度</th><td>400</td><td>208</td><td>10</td>
  </tr>
  <tr>
  <th>87學年度</th><td>400</td><td align="center">200</td><td align="right">15</td>
  </tr>
  <caption align="bottom">A more complex table with row/column span, header, and caption.<caption>
  <table>
  

• 你可以有巢狀表格（Nested Table）。你也可以將表格與 <a> 和 <img> 標籤合用。試試看！！ 這裡還有一些例子.
• <table> tag:

  <table border="Pixels" width="百分比/Pixels" height="百分比/Pixels"
         cellpadding="Pixels" cellspacing="Pixels" bgcolor="顏色"
         bordercolor="顏色">
  

  "cellpadding" 設定介於框架與內容的空間。
  "cellspacing" 設定內部框架的寬度。
• <tr>, <th>, and <td> tags:

  <tr align="left/center/right" valign="top/middle/bottom"
      bgcolor="顏色">
  

  <th> 與 <td> tags 還有 width, rowspan, 和 colspan 的屬性.
• <caption> tag:

  <caption align="top/bottom">
  

• HTML 4.0 新增功能： 請使用 IE 7.x 以上版本觀看，不建議使用於 IE 6.x 與 Netscape 4.5 以前的版本。
  1. 新的表格結構：一個表格現在分成三個段落，一個是表格標題 thead， 一個是表格附註 tfoot，與表格內容 tbody。

       <table>
       <thead>
            表格標題
       </thead>
       <tfoot>
            表格附註
       </tfoot>
       <tbody>
            表格附註
       </tbody>
       </table>
       

     範例：
     

     Month	US Dollar	UK Pound
     Today's Exchange Rate
     9	33.54	22.33
     10	32.95	21.95

     
     
  2. <colgroup> tag: 能使指定的幾行都能符合某種特性（如文字靠右），設定 的 <colgroup> 所涵蓋的 columns 總數應該符合實際的 columns 數。 擺放 的位置是介於<table>與<thead>間。目前（03/2007），Firefox 不支援 align，但是 IE 7/8 支援；Firefox 必須經由 CSS 來調整。
     範例：
     

     Month	US Dollar	UK Pound
     Today's Exchange Rate
     9	33.54	22.33
     10	32.95	21.95

     
     我們在這個範例中所設定的 <colgroup> 如下：
     

       <colgroup align="center"></colgroup>
       <colgroup span="2" width="100" align="right">
       </colgroup>
       

     
     
  3. <col> tag: 分別設定每一行自己的特色。在這個範例中，我們將每一個 column 分別設定為置中、靠右、靠右。
     範例：
     

     Month	US Dollar	UK Pound
     Today's Exchange Rate
     9	33.54	22.33
     10	32.95	21.95

     
     
  4. 新的對齊方式： 例如：第二個 column 對齊方式為：<col align="char" char=".">
     範例：
     

     Month	US Dollar	UK Pound
     Today's Exchange Rate
     9	3.54	22.33
     10	32.95	21.95

---