表格
5-1 建立表格 <TABLE>...</TABLE> 標籤 標籤解說 : 在 HTML 文件中標示一個表格 屬性解說 : ALIGN="{LEFT,RIGHT,CENTER}" BACKGROUND="URL BGCOLOR="#RRGGBB BORDER="n" BORDERCOLOR="#RRGGBB" BORDERCOLORDARK= #RRGGBB ( 僅適用於 IE) BORDERCOLORLIGHT="#RRGGBB" ( 僅適用於 IE)
CELLPADDING="n" CELLSPACING="n" COLS="n" FRAME={"VOID,BORDER,ABOVE,BELOW,HSID ES,LHS,RHS,VSIDES,BOX}" RULES={"NONE,GROUPS,ROWS,COLS,ALL"} SUMMARY="..." WIDTH="n" <TABLE> 標籤亦接受 CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<TR>...</TR> 標籤 標籤解說 : 在表格中標示一列 (Row) 屬性解說 : ALIGN="{LEFT,RIGHT,CENTER,JUSTIFY,CHAR}" BGCOLOR="#RRGGBB BORDERCOLOR="#RRGGBB" BORDERCOLORDARK= #RRGGBB ( 僅適用於 IE) BORDERCOLORLIGHT= #RRGGBB ( 僅適用於 IE) CHAR="..." CHAROFF="n" NOWRAP VALIGN="{TOP,MIDDLE,BOTTOM,BASELINE}" CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<TD>...</TD> 標籤解說 : 在一列中標示一儲存格 屬性解說 : AXIS="..." AXES="..." ALIGN="{LEFT,RIGHT,CENTER,JUSTIFY,CHAR}" BACKGROUND="URL BGCOLOR="#RRGGBB" BORDERCOLOR="#RRGGBB" BORDERCOLORDARK="#RRGGBB" ( 僅適用於 IE) BORDERCOLORLIGHT="#RRGGBB" ( 僅適用於 IE)
CHAR="..." CHAROFF="n" COLSPAN="n" NOWRAP ROWSPAN="n" VALIGN="{TOP,MIDDLE,BOTTOM,BASELINE}" WIDTH="n" CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<TH>...</TH> 標籤 標籤解說 : 在一列中標示一標題儲存格 屬性解說 :<TH> 標籤的屬性和 <TD> 標籤相同
<BODY> <TABLE BORDER="1"> <TR> <TH><FONT COLOR="Green"> 人物素描 </FONT></TH> <TH><FONT COLOR="Green"> 與小丸子的關係 </FONT></TH> <TH><FONT COLOR="Green"> 個性簡介 </FONT></TH> </TR> <TR> <TD><IMG SRC="Maru1.gif"></TD> <TD> 小丸子的好朋友 - 小玉 </TD> <TD> 坐在小丸子隔壁, 經常一起回家一起遊戲 </TD> </TR> <TR> <TD><IMG SRC="Maru2.gif"></TD> <TD> 小丸子的爺爺 - 櫻友藏 </TD> <TD> 經常和小丸子一起做白日夢耍白痴寫詩箋 </TD> </TR> <TR> <TD><IMG SRC="Maru3.gif"></TD> <TD> 小丸子的爸爸 - 櫻宏志 </TD> <TD> 愛喝酒又散漫的上班族 </TD> </TR> </TABLE> </BODY>
5-2 表格與儲存格的格式化 5-2-1 設定表格的背景色彩與背景圖片 <table border="1" bgcolor="#ffe6f2"> <table border="1" background="bg.gif">
5-2-2 設定表格的寬度 框線色彩 暗邊框色彩 亮邊框色彩 儲存格墊充與儲存格間距 我們可以使用 <table> 標籤的 width= n bordercolor= color bordercolordark= color bordercolorlight= color cellpadding= n cellspacing= n 等屬性, 設定表格的寬度 框線色彩 暗邊框色彩 亮邊框色彩 儲存格墊充與儲存格間距, 例如 : <table border= 10 width= 400 bordercolor="purple"> <table border="10" bordercolorlight="#ffdca2" bordercolordark="#d78600">
5-2-3 設定表格的框線大小 外框線及 內框線顯示方式 FRAME 屬性所指定的外框線顯示方式有下列幾種 : VOID BORDER BOX ABOVE BELOW LHS RHS HSIDES VSIDES
RULES 屬性所指定的內框線顯示方式有下列幾種 : NONE ALL GROUPS ROWS COLS
在 <TABLE> 標籤內加上 FRAME="Void" 屬性
在 <TABLE> 標籤內加上 FRAME="HSides" 屬性
在 <TABLE> 標籤內加上 RULES= Cols" 屬性
在 <TABLE> 標籤內加上 RULES="Rows" 屬性
5-2-4 設定表格的對齊方式 <TABLE BORDER="1">
<TABLE BORDER="1" ALIGN="Left">
<TABLE BORDER="1" ALIGN="Center">
<TABLE BORDER="1" ALIGN="Right">
5-2-5 設定儲存格的對齊方式 <TABLE BORDER="1" WIDTH="100%"> <TR> <TD><IMG SRC="03.gif"></TD> <TD ALIGN="Left"> 向左對齊 </TD> <TD ALIGN="Center"> 水平置中 </TD> <TD ALIGN="Right"> 向右對齊 </TD> </TR> <TR> <TD><IMG SRC="04.gif"></TD> <TD VALIGN="Top"> 靠上對齊 </TD> <TD VALIGN="Middle"> 垂直置中 </TD> <TD VALIGN="Bottom"> 靠下對齊 </TD> </TR> <TR> <TD><IMG SRC="05.gif"></TD> <TD ALIGN="Right" VALIGN="Top"> 靠右上對齊 </TD> <TD ALIGN="Center" VALIGN="Middle"> 水平垂直置中 </TD> <TD ALIGN="Right" VALIGN="Bottom"> 靠右下對齊 </TD> </TR> </TABLE>
5-2-6 設定儲存格的背景圖片與 背景色彩 <TR BGCOLOR="#FFFFB3"><TR BGCOLOR="#FFCCFF"> <TR BGCOLOR="#B3E7FF"><TR BGCOLOR="#B3FFD9">
<TABLE BORDER="0">
5-3 設定表格標題 -<CAPTION> 標籤 <CAPTION>...</CAPTION> 標籤 ( 表格標題 ) 標籤解說 : 指定表格的標題 屬性解說 :ALIGN="{LEFT,RIGHT,TOP, BOTTOM}" CLASS ID STYLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<TABLE BORDER="1"> <CAPTION><FONT FACE=" 華康流隸體 " SIZE="5" COLOR="Olive"> 泰山 TARZAN </FONT></CAPTION> <TR> <TH><FONT COLOR="#996633"> 角色 </FONT></TH> <TH><FONT COLOR="#996633"> 英文配音 </FONT></TH> <TH><FONT COLOR="#996633"> 中文配音 </FONT></TH> </TR> <TR> <TD> 泰山 </TD> <TD> 東尼高德溫 ( 第六感生死戀 )</TD> <TD> 金城武 </TD> </TR>... </TABLE>
5-4 合併儲存格 <table border="5" background="babybg.gif" align="center"> <tr align="center" bgcolor="#9ddfff"> <th rowspan="2"> </th> <th colspan="2"> 九十八年 </th> <th colspan="2"> 九十九年 </th> <th> </th> </tr> <tr align="center" bgcolor="#9ddfff"> <th> 營收 ( 百萬 )</th> <th> 純益 ( 百萬 )</th> <th> 營收 ( 百萬 )</th> <th> 純益 ( 百萬 )</th> </tr>...
5-5 設定表格的表頭 主體與表尾 表格標題表頭表格主體表尾
<THEAD>...</THEAD> <TBODY>...</TBODY> <TFOOT>...</TFOOT> 標籤用來指定表格的表頭 主體與表尾, 屬性如下 : ALIGN="{LEFT,RIGHT,CENTER,JUSTIFY,CHAR}" CHAR="..." CHAROFF="n" VALIGN="{TOP,MIDDLE,BOTTOM,BASELINE}" CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<TABLE BORDER="5" BACKGROUND="babybg.gif" ALIGN="Center" RULES="Groups"> <CAPTION><FONT COLOR="White"><B> 有意申請改掛電子類股上市公司 </B></FONT></CAPTION> <THEAD> <TR ALIGN="Center" BGCOLOR="#FFB0D8"> <TH ROWSPAN="2"> </TH> <TH COLSPAN="2"> 八十八年 </TH> <TH COLSPAN="2"> 八十七年 </TH> </TR> <TR ALIGN="Center" BGCOLOR="#FFB0D8">
<TH> 營收 ( 百萬 )</TH> <TH> 純益 ( 百萬 )</TH> <TH> 營收 ( 百萬 )</TH> <TH> 純益 ( 百萬 )</TH> </TR> </THEAD> <TBODY> <TR ALIGN="Center"> <TD> 中興保全 </TD> <TD>3953</TD> <TD>1245</TD> <TD>3687</TD> <TD>763</TD> </TR> <TR ALIGN="Center"> <TD> 燦坤實業 </TD> <TD>4884</TD> <TD>310</TD> <TD>3232</TD> <TD>358</TD> </TR>
<TR ALIGN="Center"> <TD> 飛瑞公司 </TD> <TD>5193</TD> <TD>1420</TD> <TD>4143</TD> <TD>932</TD> </TR> </TBODY> <TFOOT> <TR> <TD COLSPAN="5"> 註 : 八十八年度營收為各公司自行結算資料, 實際數字依財務公告為準 </D> </TR> </TFOOT> </TABLE>
5-6 直欄式表格 <COLGROUP>...</COLGROUP> 標籤 標籤解說 : 針對表格的直欄做分組, 將表格的幾個欄視為一組, 然後設定每一組的格式 屬性解說 : ALIGN="{LEFT,RIGHT,CENTER,JUSTIFY,CHAR}" BGCOLOR="#RRGGBB CHAR="...": CHAROFF="n" SPAN="n" VALIGN="{TOP,MIDDLE,BOTTOM,BASELINE}" WIDTH="n" CLASS ID STYLE TITLE LANG DIR onclick ondblclick onmousedown onmouseup onmouseover onkeyup onmousemove onmouseout onkeypress onkeydown
<COL> 標籤 標籤解說 : 用來設定一欄的格式, 須與 <COLGROUP> 標籤合併使用 屬性解說 :<COL> 標籤的屬性和 <COLGROUP> 標籤相同
<TABLE BORDER="1" ALIGN="Center" WIDTH="90%"> <COLGROUP SPAN="3" BGCOLOR="#FFFFB3"> </COLGROUP> <COLGROUP SPAN="2" BGCOLOR="#D9EED9"> <COL ALIGN="Center"> <COL> </COLGROUP> <TR> <TH><FONT FACE=" 華康細圓體 " COLOR="Purple"> 星座 </FONT></TH> <TH><FONT FACE=" 華康細圓體 " COLOR="Purple"> 生日 </FONT></TH> <TH><FONT FACE=" 華康細圓體 " COLOR="Purple"> 星座花 </FONT></TH> <TH><FONT FACE=" 華康細圓體 " COLOR="Purple"> 星座圖案 </FONT></TH> <TH><FONT FACE=" 華康細圓體 " COLOR="Purple"> 星座情人 </FONT></TH>
</TR> <TR> <TD><FONT FACE=" 華康細圓體 " COLOR="#914800"> 水瓶座 </FONT></TD> <TD>1/21 ~ 2/19</TD> <TD> 瑪格麗特 </TD> <TD><IMG SRC="01.gif" WIDTH="50" HEIGHT="35"></TD> <TD> 理性 自由的情人 </TD> </TR> <TR> <TD><FONT FACE=" 華康細圓體 " COLOR="#914800"> 雙魚座 </FONT></TD> <TD>2/20 ~ 3/20</TD> <TD> 鬱金香 </TD> <TD><IMG SRC="02.gif" WIDTH="50" HEIGHT="35"></TD> <TD> 體貼 浪漫的情人 </TD> </TR>...