Microsoft PowerPoint - ch05_1.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - ch05_1.ppt"

鞭朱
6 years ago
Views:

1 表格

2 5-1 建立表格 <TABLE>...</TABLE> 標籤標籤解說 : 在 HTML 文件中標示一個表格屬性解說 : ALIGN="{LEFT,RIGHT,CENTER}" BACKGROUND="URL BGCOLOR="#RRGGBB BORDER="n" BORDERCOLOR="#RRGGBB" BORDERCOLORDARK= #RRGGBB ( 僅適用於 IE) BORDERCOLORLIGHT="#RRGGBB" ( 僅適用於 IE)

3 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

4 <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

5 <TD>...</TD> 標籤解說 : 在一列中標示一儲存格屬性解說 : AXIS="..." AXES="..." ALIGN="{LEFT,RIGHT,CENTER,JUSTIFY,CHAR}" BACKGROUND="URL BGCOLOR="#RRGGBB" BORDERCOLOR="#RRGGBB" BORDERCOLORDARK="#RRGGBB" ( 僅適用於 IE) BORDERCOLORLIGHT="#RRGGBB" ( 僅適用於 IE)

6 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

7 <TH>...</TH> 標籤標籤解說 : 在一列中標示一標題儲存格屬性解說 :<TH> 標籤的屬性和 <TD> 標籤相同

9 <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"

10 5-2 表格與儲存格的格式化設定表格的背景色彩與背景圖片 <table border="1" bgcolor="#ffe6f2"> <table border="1" background="bg.gif">

11 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">

12 5-2-3 設定表格的框線大小外框線及內框線顯示方式 FRAME 屬性所指定的外框線顯示方式有下列幾種 : VOID BORDER BOX ABOVE BELOW LHS RHS HSIDES VSIDES

13 RULES 屬性所指定的內框線顯示方式有下列幾種 : NONE ALL GROUPS ROWS COLS

14 在 <TABLE> 標籤內加上 FRAME="Void" 屬性

15 在 <TABLE> 標籤內加上 FRAME="HSides" 屬性

16 在 <TABLE> 標籤內加上 RULES= Cols" 屬性

17 在 <TABLE> 標籤內加上 RULES="Rows" 屬性

18 5-2-4 設定表格的對齊方式 <TABLE BORDER="1">

19 <TABLE BORDER="1" ALIGN="Left">

20 <TABLE BORDER="1" ALIGN="Center">

21 <TABLE BORDER="1" ALIGN="Right">

22 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>

23 5-2-6 設定儲存格的背景圖片與背景色彩 <TR BGCOLOR="#FFFFB3"><TR BGCOLOR="#FFCCFF"> <TR BGCOLOR="#B3E7FF"><TR BGCOLOR="#B3FFD9">

24 <TABLE BORDER="0">

25 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

26 <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>

27 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>...

28 5-5 設定表格的表頭主體與表尾表格標題表頭表格主體表尾

29 <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

30 <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">

31 <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>

32 <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>

33 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

34 <COL> 標籤標籤解說 : 用來設定一欄的格式, 須與 <COLGROUP> 標籤合併使用屬性解說 :<COL> 標籤的屬性和 <COLGROUP> 標籤相同

36 <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>

37 </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>...

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /