約瑟 發表
在此單元, 您將會學到如何做表格的設定。 表格也是 HTML 主體中蠻重要的角色。我們可以用表格來列出分類的選項。我們用 "Word" 的時候, 只要選表格, 然後在設定 "欄" 和 "列" 就可以了。但是在 HTML 裡面是兩回事喔!
在此單元, 您將會學到如何做表格的設定。
<HTML> |
<TABLE BORDER=1> <TR> <TD>一</TD> </TR> </TABLE> |
|
<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> |
|
<TABLE BORDER=1> <TR> <TD COLSPAN=3>一</TD> </TR> <TR> <TD>一</TD><TD>二</TD><TD>三</TD> </TR> </TABLE> |
|
重點是在於 COLSPAN=3。它是表格左右合併的語法。它的用意是告 訴瀏覽器要 "橫跨 3 欄"。
<TABLE BORDER=1> <TR> <TD ROWSPAN=2>一</TD><TD>一</TD><TD>二</TD><TD>三</TD> </TR> </TABLE> |
|
有沒有看到上下列合併了? 種點是在於 ROWSPAN=2。現在來一下英文。 COL 英文就是指 Column(欄), 而 ROW 英文就是指 Row(列)。 COLSPAN 就是指合併 "欄", ROWSPAN 就是 指合併 "列"。清楚了吧?
<TABLE BORDER=1 BGCOLOR=orange> <TR> <TD ROWSPAN=2>一</TD><TD>一</TD><TD>二</TD><TD>三</TD> </TR> </TABLE> |
|
看到了沒? 或是你可以把背景語法放在 <TD> 裡, 這樣就只有那一欄是橘色的。自己試看看吧!
<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 就是向下。
表格設定大至上就是這樣, 有沒有吸收呢?