表格設定

約瑟 發表



在此單元, 您將會學到如何做表格的設定。 表格也是 HTML 主體中蠻重要的角色。我們可以用表格來列出分類的選項。我們用 "Word" 的時候, 只要選表格, 然後在設定 "欄" 和 "列" 就可以了。但是在 HTML 裡面是兩回事喔!

在此單元, 您將會學到如何做表格的設定。
表格也是 HTML 主體中蠻重要的角色。我們可以用表格來列出分類的選項。我們用 "Word" 的時候, 只要選表格, 然後在設定 "欄" 和 "列" 就可以了。但是在 HTML 裡面是兩回事喔!

STEP1:【表格基本設定】
  1. 讓我們先看看以下程式碼:(表格的基本格式)

    <HTML>
    <HEAD>

    <TITLE>表格的基本格式</TITLE>

    </HEAD>
    <BODY>

    <TABLE BORDER=1>
    <TR>
    <TD>一</TD>
    </TR>
    </TABLE>

    </BODY>
    </HTML>

  2. 把上面的語法複製到你的筆記本, 您將會看到以下的效果。

    程式碼
    結果
    <TABLE BORDER=1>
    <TR>
    <TD>一</TD>
    </TR>
    </TABLE>
    一
  3. 一個表格是由 <TR> 和 <TD> 組成的。BORDER=1 是邊緣框框的厚度, 數字越大 厚度越厚。<TR></TR> 是一列的開始。<TD></TD> 是一欄的開始。文字內容放在 它們之間。
  4. 再看看一個例子。

    程式碼
    結果

    <TABLE BORDER=1>
    <TR>
    <TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    </TABLE>
    一二三

    在這個例子裡面, 我們設定三個欄位, 分別為 "一" "二" "三"。如果要多加一列, 就多一個 <TR> (如下程式碼)。

    程式碼
    結果

    <TABLE BORDER=1>
    <TR>
    <TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    <TR>
    <TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    </TABLE>
    一二三
    一二三

STEP2:【表格合併設定】
  1. 我們在做表格的時候, 應該是不會只做故定的欄或列吧! 有時候我們會要 [何併表欄] 或是 [何併表列]。
    看看以下的例子:

    程式碼
    結果
    <TABLE BORDER=1>
    <TR>
    <TD COLSPAN=3>一</TD>
    </TR>
    <TR>
    <TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    </TABLE>
    一
    一二三

    重點是在於 COLSPAN=3。它是表格左右合併的語法。它的用意是告 訴瀏覽器要 "橫跨 3 欄"。

  2. 現在我們來看看上下合併的語法。請看下面的表格。

    程式碼
    結果
    <TABLE BORDER=1>
    <TR>
    <TD ROWSPAN=2>一</TD><TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    </TABLE>
    一一二三
    一二三

    有沒有看到上下列合併了? 種點是在於 ROWSPAN=2。現在來一下英文。 COL 英文就是指 Column(欄), 而 ROW 英文就是指 Row(列)。 COLSPAN 就是指合併 "欄", ROWSPAN 就是 指合併 "列"。清楚了吧?


STEP3:【表格背景位置設定】
  1. 這裡, 我們要來看看表格的背景和內容位置設定。實際上, 表格的背景的語法跟文件背景的語法一模 一樣。看以下的表格就知道了!

    程式碼
    結果
    <TABLE BORDER=1 BGCOLOR=orange>
    <TR>
    <TD ROWSPAN=2>一</TD><TD>一</TD><TD>二</TD><TD>三</TD>
    </TR>
    </TABLE>
    一一二三

    看到了沒? 或是你可以把背景語法放在 <TD> 裡, 這樣就只有那一欄是橘色的。自己試看看吧!

  2. 接下來是內容位置。我們是不是常常很討厭, 為什麼表格內容總是靠左邊呢? 現在就來告訴你如 何改變它的位置。對照以下表格。

    程式碼
    結果
    <TABLE BORDER=1 WIDTH="100">
    <TR>
    <TD>一</;TD>
    </TR>
    </TABLE>

    原始的。
    一
    <TABLE BORDER=1 WIDTH="100" HEIGHT="60">
    <TR>
    <TD ALIGN="Center">一</TD>
    </TR>
    </TABLE>

    對中。
    一
    <TABLE BORDER=1 WIDTH="100" HEIGHT="60">
    <TR>
    <TD VALIGN="Top">一</TD>
    </TR>
    </TABLE>

    對上。
    一

    當 ALIGN 放在 <TD> 裡面時, 你加 Center 就是要它對中, Right & Left 就是要它對左右。
    而 VALIGN 是用來做 "上" "下" 的對齊用的。 Top 就是向上, Buttom 就是向下。

表格設定大至上就是這樣, 有沒有吸收呢?

最後更新日期: 6/24/2001 9:23:40 AM