Download presentation
Presentation is loading. Please wait.
1
第 5 章 列表與表格 著作權所有 © 旗標出版股份有限公司
2
本章提要 條列式列表 定義用列表 表格 (Table) 化的世界 表格標籤屬性之介紹 表格雜項總結 HTML 4.0 的表格擴充規格
3
條列式列表 列表是一種簡單且實用的資料排列方式, 一堆資料若以適當的列表顯示, 閱讀時會更輕鬆悅目。
條列式列表的特徵是一列、一列地依序列出所需要的項目(item)。
4
條列式列表 <DIR>…</DIR> <MENU>…</MENU>
<OL>…</OL> —有序號的列表 <UL>…</UL> —無序號的列表 巢狀列表
5
<DIR>…</DIR>
6
<MENU>… </MENU>
7
<OL>…</OL> 有序號的列表
8
<OL> 標籤的屬性 改變編號的樣式
9
<OL> 標籤的屬性 改變編號的樣式
10
<OL> 標籤的屬性 改變編號的起始值與指定編號
11
<UL>…</UL> 無序號的列表
12
<UL> 標籤的屬性
13
巢狀列表
14
定義用列表 定義用列表常用來標示名詞, 因此在列出的名詞之後, 會加入其定義或說明：
15
定義用列表 定義列表的標籤 緊密排列的列表
16
定義列表的標籤 定義列表的用法與 <OL> 等條列式列表標籤略有不同, 因為列表中除了各項 (名詞) 的列表外, 各項目之下都有自己的名詞解釋, 其格式如下：
17
定義列表的標籤
18
定義列表的標籤
19
緊密排列的列表 在 <DL> 標籤中加上 COMPACT 屬性, 可使列表排列得較緊密：
20
緊密排列的列表 一旦 <DT> 的文字超過 4 個大寫英文字母的長度後, COMPACT 的作用即消失：
21
表格 (Table) 化的世界
22
表格 (Table) 化的世界
23
表格 (Table) 化的世界 表格標籤基本架構介紹 實例 TABLE 標籤簡便型用法
24
表格標籤的基本架構介紹
25
表格標籤的基本架構介紹 <TABLE>…</TABLE> 產生表格
26
表格標籤的基本架構介紹 <CAPTION>…</CAPTION> 為表格加上標題
27
表格標籤的基本架構介紹 <TR>…</TR> 定義橫列
28
表格標籤的基本架構介紹 <TD>…</TD> 定義每一橫列中的資料欄位
29
表格標籤的基本架構介紹 <TH>…</TH> 定義欄位標題名稱
30
<TH> 與 <TD> 的異同
適用場合 標頭欄位 資料欄位 字體粗細 加粗字體 正常字體 預設位置 左右居中 靠左對齊
31
實例
32
實例
33
TABLE 標籤簡便型用法
34
TABLE 標籤簡便型用法
35
表格標籤屬性之介紹
36
表格標籤屬性之介紹 <TABLE> 的屬性 <CAPTION> 的屬性
<TR>、<TH>、<TD> 的屬性 COLSPAN 和 ROWSPAN 屬性—欄位的合併 BGCOLOR, BACKGROUND 屬性—設定欄位的背景
37
<TABLE> 的屬性 <TABLE BORDER>、<TABLE BORDER="N"> —為表格加上框線：
38
<TABLE> 的屬性
39
<TABLE> 的屬性 若想控制邊框厚度, 也可以給 BORDER 屬性一個設定值：
40
<TABLE> 的屬性
41
<TABLE> 的屬性 <TABLE WIDTH> —調整表格的寬度：
42
<TABLE> 的屬性
43
<TABLE> 的屬性 可設定表格寬度隨瀏覽器視窗大小動態調整：
44
<TABLE> 的屬性
45
<TABLE> 的屬性 <TABLE HEIGHT> —調整表格的高度：
46
<TABLE> 的屬性
47
<TABLE> 的屬性 <TABLE CELLSPACING> —調整儲存格線的寬度：
48
<TABLE> 的屬性
49
<TABLE> 的屬性 <TABLE CELLPADDING> —調整欄位邊界：
50
<TABLE> 的屬性
51
<TABLE> 的屬性 <TABLE BGCOLOR> —設定表格背景顏色：
<TABLE BACKGROUND> —設定表格背景圖片：
52
<TABLE> 的屬性
53
<TABLE> 的屬性
54
<TABLE> 的屬性
55
<CAPTION> 的屬性 <CAPTION ALIGN> —設定表格標題位置。ALIGN 的屬性值有 top 與 bottom ：
56
<CAPTION> 的屬性
57
<TR>、<TH>、<TD> 的屬性
ALIGN 屬性 用來設定欄位內資料的水平對齊方式, 分為left、center、right 等 3 種設定值：
58
<TR>、<TH>、<TD> 的屬性
59
<TR>、<TH>、<TD> 的屬性
60
<TR>、<TH>、<TD> 的屬性
VALIGN 屬性 用來設定欄位內資料的垂直對齊方式, 有 top、middle、bottom 等 3 種設定值：
61
<TR>、<TH>、<TD> 的屬性
62
<TR>、<TH>、<TD> 的屬性
63
<TR>、<TH>、<TD> 的屬性
64
<TR>、<TH>、<TD> 的屬性
NOWRAP 屬性 將欄位資料設為不換行。 WIDTH 屬性 用來設定儲存格的寬度, 設定值同樣可為百分比值或圖像點數。
65
<TR>、<TH>、<TD> 的屬性
在不使用 WIDTH 屬性的情況下：
66
<TR>、<TH>、<TD> 的屬性
67
<TR>、<TH>、<TD> 的屬性
設定相對寬度：
68
<TR>、<TH>、<TD> 的屬性
69
COLSPAN 和 ROWSPAN 屬性—欄位的合併
70
COLSPAN 和 ROWSPAN 屬性—欄位的合併
71
COLSPAN 屬性範例
72
COLSPAN 屬性範例
73
ROWSPAN 屬性範例
74
ROWSPAN 屬性範例
75
COLSPAN + ROWSPAN 屬性範例
76
COLSPAN + ROWSPAN 屬性範例
77
BGCOLOR, BACKGROUND 屬性—設定欄位的背景
78
BGCOLOR, BACKGROUND 屬性—設定欄位的背景
79
表格雜項總結 表格標籤有容乃大 表格標籤疑難解決
80
表格標籤有容乃大 一個表格欄位內可放入文字、圖形、格式化輸出、選單、超文字連結, 甚至再含入一個表格：
81
表格標籤有容乃大
82
表格標籤有容乃大
83
表格標籤有容乃大
84
表格標籤疑難解決 TABLE 空白欄位設定：
85
表格標籤疑難解決
86
表格標籤疑難解決 若覺得不好看, 可換行來解決：
87
表格標籤疑難解決 TABLE 內資料收尾：
88
表格標籤疑難解決
89
表格標籤疑難解決 將原本分行寫的 <TD>…</TD> 改寫在同一行內：
90
擴充欄位重疊 下面的錯誤示範, 只是說明一種可能的情況：
91
擴充欄位重疊
92
HTML 4.0 的表格擴充規格 表格段落標籤 直欄式表格 框線的控制
93
表格段落標籤 <THEAD> —表頭, 用來定義表格中要作為表頭的資料列。<CAPTION> 是定義表格的標題, 且置於表格之外, 而 <THEAD> 是置於表格的最前端。 <TFOOT> —表尾, 用來定義表格中要作為表尾的資料列。 <TBODY> —表格主體, 在 <TBODY> 標籤中, 只能用 <TR> 來定義表格中的橫列資料。
94
表格段落標籤實例
95
表格段落標籤實例
96
表格段落標籤實例
97
表格段落標籤實例 將前例擴充成包含三個表格主體：
98
表格段落標籤實例
99
表格段落標籤實例
100
表格段落標籤實例
101
直欄式表格 <COLGROUP> —以直行來分組：
102
直欄式表格 <COL> —控制直行分組中每一行的屬性：
103
直欄式表格實例
104
直欄式表格實例
105
直欄式表格實例
106
框線的控制 內部框線設定 —RULES, 用來設定表格之內各欄位間的框線出現方式。 外部框線設定 —FRAME, 用來設定表格的外框。
107
RULES 的屬性值 none：不要框線, 此為預設值。 groups：只有在列的群組或行的群組間才 會顯示框線。
rows：在各列之間顯示框線。 cols：在各行之間顯示框線。 all：所有的列和行之間都顯示框線。
108
RULES 的屬性值
109
FRAME 的屬性值 void：不顯示外框。 hsides：只顯示上下兩條水平的外框線。 vsides：只顯示左右兩條垂直的外框線。
above：只顯示上方的外框線。 below：只顯示下方的外框線。 lhs：只顯示左邊的外框線。
110
FRAME 的屬性值 rhs：只顯示右邊的外框線。 box、border：四條線都顯示。
111
FRAME 的屬性值
112
FRAME 的屬性值
113
FRAME 的屬性值
Similar presentations
