2012年10月26日 星期五

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>
    
  • 有標題與跨列或欄的表格:

    部別
    四技二技研究所
    86學年度40020810
    87學年度40020015
    A more complex table with row/column span, header, and caption.
    <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>
        
      範例:
      MonthUS DollarUK Pound
      Today's Exchange Rate
      933.5422.33
      1032.9521.95

    2. <colgroup> tag: 能使指定的幾行都能符合某種特性(如文字靠右),設定 的 <colgroup> 所涵蓋的 columns 總數應該符合實際的 columns 數。 擺放 的位置是介於<table>與<thead>間。目前(03/2007),Firefox 不支援 align,但是 IE 7/8 支援;Firefox 必須經由 CSS 來調整。
      範例:
      MonthUS DollarUK Pound
      Today's Exchange Rate
      933.5422.33
      1032.9521.95

      我們在這個範例中所設定的 <colgroup> 如下:
        <colgroup align="center"></colgroup>
        <colgroup span="2" width="100" align="right">
        </colgroup>
        

    3. <col> tag: 分別設定每一行自己的特色。在這個範例中,我們將每一個 column 分別設定為置中、靠右、靠右。
      範例:
      MonthUS DollarUK Pound
      Today's Exchange Rate
      933.5422.33
      1032.9521.95

    4. 新的對齊方式: 例如:第二個 column 對齊方式為:<col align="char" char=".">
      範例:
      MonthUS DollarUK Pound
      Today's Exchange Rate
      93.5422.33
      1032.9521.95






沒有留言:

張貼留言