-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
254 lines (233 loc) · 17.3 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Table 表格 - Wibibi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，分別是 table、tr 與 td 這幾個重點，組合起來才是">
<meta name="keywords" content="HTML,Table,表格">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="max-image-preview:large">
<link href="css/main.css" rel="stylesheet" type="text/css" media="(min-width:641px)" />
<link href="css/main_small.css" rel="stylesheet" type="text/css" media="(max-width:640px)" />
<link href="css/info.css" rel="stylesheet" type="text/css" media="(min-width:641px)" />
<link href="css/info_small.css" rel="stylesheet" type="text/css" media="(max-width:640px)" />
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body>
<div id="TopDiv">
<div id='HeaderBox'>
<div id='SiteLogo'><a href='/'><img src='images/logo.png' border='0'></a></div>
<div id="toggle"><img src="images/ControlMenuIcon.png"></div>
<div id="SearchBox">
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id='Menu'>
<ul>
<li><a href='/'>首頁</a></li>
<li><a href='c.php?cid=9'>HTML</a></li>
<li><a href='c.php?cid=20'>HTML5</a></li>
<li><a href='c.php?cid=5'>PHP</a></li>
<li><a href='c.php?cid=19'>MySQL</a></li>
<li><a href='c.php?cid=7'>CSS</a></li>
<li><a href='c.php?cid=21'>CSS3</a></li>
<li><a href='c.php?cid=10'>JavaScript</a></li>
<li><a href='c.php?cid=18'>軟體介紹</a></li>
<li><a href='c.php?cid=14'>其它</a></li>
<div style='clear:both;'></div>
</ul>
</div><div id='navi'>
<div id="navi_link">
<a href='/'>Home</a> › <a href='c.php?cid=9'>HTML</a> › HTML Table 表格
</div>
</div>
<div id="container">
<div id='MainShow'>
<h1>HTML Table 表格</h1>
<!--原生_文章內置_1 Start-->
<div id="Ads1">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="1174116920"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!--原生_文章內置_1 End-->
<div id='content'>HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，以下做個簡單的表格範例。<div id="CodeBox"><table border="1"><br> <tr><br> <td>這裡可以放表格內容</td><br> </tr><br></table><br></div>呈現結果如下<br><table border="1"><tbody><tr><td>這裡可以放表格內容</td></tr></tbody></table><br>範例中使用了<table> 與 </table> 的標籤把內容包起來，<tr></tr> 標籤代表的是一行，而 <td></td> 標籤則代表一列，為了清楚呈現，我們還為 table 加上了 border="1" 的設定，這代表這個 table 的邊框粗細是 1，在實際使用上你也可以設定為其它的値，例如 border="0" 則不會顯示邊框。請注意 HTML 語法都必須用一個開始標籤與一個結束標籤把內容包起來，開始標籤與結束標籤是對等的，缺一不可。<br><br>除了可以寫一個單純的表格之外，我們還可以設定 table 的寬度、高度或邊框樣式，要做這些設定，你必須先了解幾個能夠控制表格的元素，例如 width、border、background ... 等。<br><ul><li>width：控制 table 的寬度</li><li>border：控制 table 邊框的粗細</li><li>background：控制背景圖片</li><li>colspan：控制儲存格橫跨幾個欄位</li><li>rowspan：控制儲存格垂直跨幾個欄位<br></li></ul>接著我們寫幾個範例<br><br>兩個欄位的 table 表格範例<br><div id="CodeBox"><table width="300" border="1"><br> <tr><br> <td>這裡是第一個欄位</td><br> <td>這裡是第二個欄位</td><br> </tr><br></table><br></div>呈現結果如下<br><table width="300" border="1"><tbody><tr><td>這裡是第一個欄位</td><td>這裡是第二個欄位</td></tr></tbody></table><br><br>兩行兩欄位的 Table 表格範例<div id="CodeBox"><table border="1"><br> <tr><br> <td>這裡是第一行的第一個欄位</td><br> <td>這裡是第一行的第二個欄位</td><br> </tr><br> <tr><br> <td>這裡是第二行的第一個欄位</td><br> <td>這裡是第二行的第二個欄位</td><br> </tr><br></table><br></div>呈現結果如下<br><table border="1"><tbody><tr><td>這裡是第一行的第一個欄位</td><td>這裡是第一行的第二個欄位</td></tr><tr><td>這裡是第二行的第一個欄位</td><td>這裡是第二行的第二個欄位</td></tr></tbody></table><br>接著我們把第一行變成一個欄位<div id="CodeBox"><table border="1"><br> <tr><br> <td colspan="2">這裡是第一行</td><br> </tr><br> <tr><br> <td>這裡是第二行的第一個欄位</td><br> <td>這裡是第二行的第二個欄位</td><br> </tr><br></table><br></div>呈現結果如下<br><table border="1"><tbody><tr><td colspan="2">這裡是第一行</td></tr><tr><td>這裡是第二行的第一個欄位</td><td>這裡是第二行的第二個欄位</td></tr></tbody></table><br>最後做一個兩欄位的 Table，第一個欄位 rowspan="2"，第二個欄位有兩行<div id="CodeBox"><table border="1"><br> <tr><br> <td rowspan="2">這是第一個欄位</td><br> <td>這裡是第二個欄位第一行</td><br> </tr><br> <tr><br> <td>這裡是第二個欄位第二行</td><br> </tr><br></table></div>呈現結果<table border="1"><tr><td rowspan="2">這是第一個欄位</td><td>這裡是第二個欄位第一行</td></tr><tr><td>這裡是第二個欄位第二行</td></tr></table><br><br><b>延伸閱讀</b><ul><li><a href="info.php?tid=148">HTML 水平置中與垂直置中</a></li><li><a href="info.php?tid=439" title="HTML Table 表格文字顏色">HTML Table 表格文字顏色</a></li><li><a href="info.php?tid=440" title="HTML Table 表格的文字大小與字型">HTML Table 表格的文字大小與字型</a></li><li><a href="info.php?tid=128">HTML 背景顏色 bgcolor 與背景圖片 background 設定</a></li><li><a href="info.php?tid=86" title="CSS border 邊框">CSS border 邊框</a></li><li><a href="info.php?tid=441" title="HTML Table 表格邊框顏色與樣式設計">HTML Table 表格邊框顏色與樣式設計</a></li><li><a href="info.php?tid=442" title="HTML Table 表格背景顏色">HTML Table 表格背景顏色</a></li><li><a href="info.php?tid=HTML_Table_cellpadding_%E5%B1%AC%E6%80%A7" title="HTML Table cellpadding 屬性">HTML Table cellpadding 屬性</a></li></ul></div>
<div id="Ads2">
<!--原生_文章內置_2 Start-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="8935776588"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--原生_文章內置_2 End-->
</div>
<div id="SuggestTopic">
<p>您可能會想看</p>
<ul>
<li><a href="info.php?tid=HTML_div_%E6%A8%99%E7%B1%A4">HTML div 標籤</a></li>
<li><a href="info.php?tid=%E8%A8%AD%E8%A8%88_HTML_%E5%9C%96%E7%89%87%E8%88%87%E5%9C%96%E7%89%87%E9%82%8A%E6%A1%86%E9%96%93%E7%9A%84%E8%B7%9D%E9%9B%A2">設計 HTML 圖片與圖片邊框間的距離</a></li>
<li><a href="info.php?tid=DIV_%E5%8D%80%E5%A1%8A%E5%85%A7%E6%96%87%E5%AD%97%E8%88%87%E9%82%8A%E6%A1%86%E7%9A%84%E8%B7%9D%E9%9B%A2%E8%AA%BF%E6%95%B4">DIV 區塊內文字與邊框的距離調整</a></li>
<li><a href="info.php?tid=HTML_TABLE_%E8%A1%A8%E6%A0%BC%E5%85%A7%E7%9A%84%E6%96%87%E5%AD%97%E8%A1%8C%E9%AB%98">HTML TABLE 表格內的文字行高</a></li>
<li><a href="info.php?tid=DIV_%E5%8D%80%E5%A1%8A%E5%85%A7%E7%9A%84%E6%96%87%E5%AD%97%E8%A1%8C%E9%AB%98%E8%A8%AD%E8%A8%88">DIV 區塊內的文字行高設計</a></li>
<li><a href="info.php?tid=%E6%9B%BF_HTML_button_%E6%8C%89%E9%88%95%E5%A2%9E%E5%8A%A0%E8%83%8C%E6%99%AF%E5%9C%96%E7%89%87">替 HTML button 按鈕增加背景圖片</a></li>
<li><a href="info.php?tid=HTML_img_title_%E8%88%87_img_alt_%E7%9A%84%E5%B7%AE%E5%88%A5">HTML img title 與 img alt 的差別</a></li>
<li><a href="info.php?tid=%E7%94%A8_CSS_%E8%A8%AD%E8%A8%88_HTML_%E8%A1%A8%E6%A0%BC%E6%AC%84%E4%BD%8D%E5%85%A7%E6%96%87%E5%AD%97%E9%9D%A0%E4%B8%8B%E5%B0%8D%E9%BD%8A">用 CSS 設計 HTML 表格欄位內文字靠下對齊</a></li>
<li><a href="info.php?tid=%E7%94%A8_CSS_%E8%A8%AD%E8%A8%88_HTML_%E8%A1%A8%E6%A0%BC%E6%AC%84%E4%BD%8D%E5%85%A7%E6%96%87%E5%AD%97%E9%9D%A0%E4%B8%8A%E5%B0%8D%E9%BD%8A">用 CSS 設計 HTML 表格欄位內文字靠上對齊</a></li>
<li><a href="info.php?tid=HTML_Table_colspan_%E5%B1%AC%E6%80%A7">HTML Table colspan 屬性</a></li>
</ul>
</div>
<!--相符內容 Start-->
<div id="Ads4">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="6965838540"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!--相符內容 End-->
</div>
<div id='sidebar_right'>
<div id="sidebar_aff"><iframe src="sidebar_aff.php?sec=1" name="mainframe1" id="mainframe1" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" onload="Javascript:SetCwinHeight1()"></iframe></div>
<div id="Ads5">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Wibibi_回應式_1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="7789038844"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="ToDayHotList">
<p>今日熱門文章</p>
<ul>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E4%B8%8A%E5%80%8B%E6%9C%88%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於上個月的條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E6%9C%AC%E6%9C%88%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於本月的條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E6%98%A8%E5%A4%A9%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於昨天的條件判斷寫法</a></li>
<li><a href="info.php?tid=PHPmysqli_set_charset%E5%87%BD%E5%BC%8F%E8%A8%AD%E5%AE%9A%E5%AD%97%E7%AC%A6%E7%B7%A8%E7%A2%BC">PHP mysqli_set_charset 函式設定字符編碼</a></li>
<li><a href="info.php?tid=PHPmysqli_connect%E8%B3%87%E6%96%99%E5%BA%AB%E9%80%A3%E7%B7%9A%E5%87%BD%E5%BC%8F">PHP: mysqli_connect 資料庫連線函式</a></li>
<li><a href="info.php?tid=MySQLSELECT%E5%88%A4%E6%96%B7%E4%BB%8A%E5%A4%A9%E4%B9%8B%E5%89%8D%E6%88%96%E6%9F%90%E5%A4%A9%E4%B9%8B%E5%89%8D%E7%9A%84%E6%97%A5%E6%9C%9F%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT 判斷今天之前或某天之前的日期條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E4%BB%8A%E5%A4%A9%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於今天的條件判斷寫法</a></li>
<li><a href="info.php?tid=HTML_div_%E6%A8%99%E7%B1%A4">HTML div 標籤</a></li>
<li><a href="info.php?tid=CSS_Attribute_Selectors_%E5%B1%AC%E6%80%A7%E9%81%B8%E6%93%87%E5%99%A8">CSS Attribute Selectors 屬性選擇器</a></li>
<li><a href="info.php?tid=%E6%9B%BF_CSS_span_%E5%8D%80%E5%9F%9F%E5%A2%9E%E5%8A%A0%E9%99%B0%E5%BD%B1%E6%95%88%E6%9E%9C">替 CSS span 區域增加陰影效果</a></li>
</ul>
</div>
<div id='Ads6'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Wibibi_回應式_2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="7844879168"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="NowHotTopicList">
<p>即時熱門文章</p>
<ul>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E4%B8%8A%E5%80%8B%E6%9C%88%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於上個月的條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E6%9C%AC%E6%9C%88%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於本月的條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E6%98%A8%E5%A4%A9%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於昨天的條件判斷寫法</a></li>
<li><a href="info.php?tid=PHPmysqli_set_charset%E5%87%BD%E5%BC%8F%E8%A8%AD%E5%AE%9A%E5%AD%97%E7%AC%A6%E7%B7%A8%E7%A2%BC">PHP mysqli_set_charset 函式設定字符編碼</a></li>
<li><a href="info.php?tid=PHPmysqli_connect%E8%B3%87%E6%96%99%E5%BA%AB%E9%80%A3%E7%B7%9A%E5%87%BD%E5%BC%8F">PHP: mysqli_connect 資料庫連線函式</a></li>
<li><a href="info.php?tid=MySQLSELECT%E5%88%A4%E6%96%B7%E4%BB%8A%E5%A4%A9%E4%B9%8B%E5%89%8D%E6%88%96%E6%9F%90%E5%A4%A9%E4%B9%8B%E5%89%8D%E7%9A%84%E6%97%A5%E6%9C%9F%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT 判斷今天之前或某天之前的日期條件判斷寫法</a></li>
<li><a href="info.php?tid=MySQLSELECTWHEREdate%E7%AD%89%E6%96%BC%E4%BB%8A%E5%A4%A9%E7%9A%84%E6%A2%9D%E4%BB%B6%E5%88%A4%E6%96%B7%E5%AF%AB%E6%B3%95">MySQL SELECT WHERE date 等於今天的條件判斷寫法</a></li>
<li><a href="info.php?tid=HTML_div_%E6%A8%99%E7%B1%A4">HTML div 標籤</a></li>
<li><a href="info.php?tid=CSS_Attribute_Selectors_%E5%B1%AC%E6%80%A7%E9%81%B8%E6%93%87%E5%99%A8">CSS Attribute Selectors 屬性選擇器</a></li>
<li><a href="info.php?tid=%E6%9B%BF_CSS_span_%E5%8D%80%E5%9F%9F%E5%A2%9E%E5%8A%A0%E9%99%B0%E5%BD%B1%E6%95%88%E6%9E%9C">替 CSS span 區域增加陰影效果</a></li>
</ul>
</div>
<div id='Ads7'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Wibibi_回應式_3 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="8837384872"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="Ads8">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Wibibi_回應式連結_2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5633897948803345"
data-ad-slot="6959338178"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id='FooterBox'>
<div id='FooterDiscript'>© Copyright <a href='/'>wibibi.com</a> 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012</div>
</div>
<!--導入JQuery與滑動選單 Start-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").click(function() {
$(this).toggleClass("active");
$("#Menu").slideToggle();
});
});
</script>
<!--導入JQuery與滑動選單 End-->
<script type="text/javascript">
<!--
function SetCwinHeight1() {
var iframeid = document.getElementById("mainframe1"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
function SetCwinHeight2() {
var iframeid = document.getElementById("mainframe2"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
-->
</script>
</body>
</html>