表格的應用以及 iframe 內置框架的應用

第七堂課：表格的應用以及 iframe 內置框架的應用

表格主要拿來作為資料展示之用，例如課表、電視節目表、一般資料報表等等。以前在 CSS 還不夠成熟的年代，我們還常常拿表格來進行排版，不過，由於有了 CSS 的方塊，因此我們現在不建議你使用表格來進行排版的！那是錯誤的處理方式，排版應該要使用 CSS 才對！不要拿 table 來排版了。而我們也不建議使用 frameset 來進行框架的設定，如果真的有需要用到框架，建議使用內置框架 (iframe) 來進行即可喔！

本章重點目標：

表格的宣告，其實表格的組成有：(1)整體表格 (2)一列 (3)每格(儲存格)。所以我們針對這三點來設計標籤。
1. <table> </table>：
  用來宣告整體表格的開始與結束；
2. <tr> </tr>：
  用來宣告一列的開始與結束；
3. <td> 放置儲存格的內容文字！</td>：以及 <th> 放置資料抬頭的地方 <th>
  這個 td, th 標籤內才是放置實際資料的地方喔！th 指的是該行或該列的標題 (table headling)
請注意所謂的行列的宣告！參考課本 page 131 的說明，橫的是列，直的是行！重要重要！此外，還有 <caption> 標籤，這個標籤必須要放在 table 標籤內，是成對標籤，作為表格的大標題之用！相當有幫助！

一般表格的作法，你可以先在所見即所得的軟體上面製作好表格後，在複製原始碼到你的 HTML 檔案中。否則設計表格式，請依據底下的範例來撰寫，會比較有層次感！

<table>
    <caption> 標題部份 <caption>
    <tr>
	<td> 第 1 個欄位 </td>
	<td> 第 2 個欄位 </td>
	<td> 第...個欄位 </td>
    </tr>
    <tr>
	<td> 第 1 個欄位 </td>
	<td> 第 2 個欄位 </td>
	<td> 第...個欄位 </td>
    </tr>
</table>

基礎表格製作，說明一下你的個人學歷囉！表格檔案內容可下載：按這裡下載
最外層表格，亦即 <table> 的相關屬性，重要的項目有：
1. border="數字" ：邊框的厚度；
2. cellspacing="數字" ：儲存格間的距離；
3. cellpadding="數字" ：儲存格內容與儲存格邊界的空白距離(這兩個參考 page 8-8)；
4. width="數字或百分比" ：這個表格外觀的全長寬度；
5. height="數字或百分比" ：表格外觀的全長高度；
6. align="left, center, right" ：表格在瀏覽器上面的位置；
7. bgcolor="顏色" ：表格的整體顏色；
8. background="圖檔" ：表格的底圖！重要！
9. 另外，針對 CSS 的 border 語法來說，由於表格的所有格線中間都會留白，因此看起來的效果與 HTML 的 border 效果不太一樣。若想要讓 border 效果相似，就得要使用『 border-collapse: cllapse 』，至於預設值為 seprate 喔！
實做：請調整上個練習中，顯示出邊框、調整資料與儲存格邊界的空白為 10 個像素，儲存格的間距為 5 個像素，結果如何？
每列的相關屬性，亦即 <tr> 的相關屬性！可用的有：
- bgcolor="顏色" ：可定義一整列的顏色！可與 <table> 的屬性不同！讓表格更多樣！
- align="left, center, right" ：讓該列內的資料對齊有一致的格式！
- valign="top, middle, bottom" ：上面是水平對齊，這裡則是垂直對齊的位置！
實做：請將上述題目的練習加強，情況會像底下這樣：
- 讓表格的整體寬度達 500 像素，高度達 300 像素；
- 第一列為水平置中對齊，垂直置中對齊；
- 第二列為水平靠右對齊，垂直方向為底部對齊；
- 第一列底色為淺藍色，第二列則保留表格的原本色彩。
再來則是 <td> 的屬性，基本上與前面的屬性差不多，有 width, height, align, valign, bgcolor等，比較特殊的有底下這兩者：
- colspan="數字" ：col 是橫的儲存格擴展，也就是說，在水平的方向有幾個儲存格被整合成一格；
- rowspan="數字" ：row 是直的儲存格擴展，也就是說，在垂直的方向有幾個儲存格被整合成一格；
實做：將第五堂課的特殊字元清單拿出來，改以表格處理。參考課本 page 194 給予 10 個以上的特殊符號處理！
實做：接下來請進行本週習題一的練習！
內置框架，使用 <iframe> 來設計，主要是將你的網頁切一個小方塊，放入另一個網頁！所以，整個版面會有兩個以上的網頁出現。經常使用的就是 google 地圖的利用了！常用的元素有：
- src="url"
- height="高度"
- width="寬度"
實做：請將你的網頁上，透過 google 地圖取得崑山科大的地圖，將該地圖放入我們的網頁檔案中！

本章練習與習題：

請使用網頁安全色來建置網頁(透過 00, 33, 66, 99, cc, ff 來組合，或是 0, 51, 102, 153, 204, 255 來組合)。我要的表格尺寸大小至少為 5x10 格！且色碼會浮在該色塊上面！每個儲存格高度請使用預設值，平均分散每個儲存格的寬度即可！(色碼請自行調整。)
請製作出我們班自己的課表！請注意，特色是連續課程應該要連續在一起，不要有儲存格的分隔。
請建立如這個連結：履歷表的履歷表。你的履歷表資料至少要有：中文姓名、性別、電子郵件、現在住所(簡單寫一寫就好)、電話(請務必使用假的電話號碼)、學歷、經歷、專業證照等項目。注意，相片部分請將您的照片貼上！
將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！

第七堂課： 表格的應用以及 iframe 內置框架的應用

第七堂課：表格的應用以及 iframe 內置框架的應用