表格的製作

上一頁        HTML首頁        下一頁

表格 <table> </table> 的作用,除了一般表格的製作外,尚可用無邊框的表格來設計整體的版面,以增加視覺效果。分述如下:
表格設定
合併儲存格
版面設計


表格設定

用 途 HTML 語法 實 例
一般的表格 <table>
<caption> 表格說明 </caption>
<tr> 標題列的設定
       <th>第一欄小標題的設定</th>
       <th>第二欄小標題的設定</th>
</tr>
<tr> 第二列列的設定
        <td>第一欄儲存格的設定</td>
        <td>第二欄儲存格的設定</td>
</tr>
</table>
單線框表格
表格整體 <table> </table> 的設定 <table align=表格左右或置中對齊
          width=表格寬度
          border=表格框線寬度
          bgcolor=表格底色代碼
          cellspacing=儲存格間距>
</table>
表格寬度及位置設定
粗且有顏色框的表格
不同底色表格
雙線框的表格
加寬儲存格間距的表格
全列 <tr></tr> 的設定 <tr bgcolor=全列的底色代碼
     align=全列文字水平位置
     valign=全列文字垂直位置>
</tr>
列的設定
儲存格 <td></td>的設定 <td align=left /center/ right
      valign=top /middle/ bottom
      width=儲存格寬度
      height=儲存格高度
      border=儲存格框線寬度
      bgcolor=儲存格底色代碼
</td>
儲存格的設定

  back to top


合併儲存格

用途 HTML語法 實例
合併列 <td rowspan="合併列數"> </td> 合併列
合併欄 <td colspan="合併欄數"> </td> 合併欄

  back to top


版面設計

用途 HTML語法 實例
網頁的分割及排版,利用儲存格大小及空白儲存格來設定版面格式。 <table border=0>
</table>
分割網頁
電腦課進度
文字與框線相嵌合的文字方塊。 <table border=0 width=文字方塊全寬>
<tr>
<td>
<fieldset>
      <legend>框上文字</legend>
  <table border=0 width=文字寬度>
      <tr>
      <td >方塊內文字</td>
      </tr>
      </table>
</fieldset>
</td>
</tr>
</table>
大人物小故事的刊頭

  back to top


本網頁於 03/03/2002 製作,並於 09/25/2003更新 © 2003 版權為柴惠敏所有,如需引用請先告知