| 回教學網站 | 回網站規劃與設計首頁 | 作業繳交區 |
第六章、表格的應用(極重要啊！)
第六章內容重點：
  1. 表格的宣告，其實表格的組成有：(1)整體表格 (2)一列 (3)每格(儲存格)。所以我們針對這三點來設計標籤。

    1. <table> </table>：
      用來宣告整體表格的開始與結束；

    2. <tr> </tr>：
      用來宣告一列的開始與結束；

    3. <td> 放置儲存格的內容文字！</td>：
      這個 td 標籤內才是放置實際資料的地方喔！

  2. 請注意所謂的行列的宣告！參考課本 page 6-2 的說明，橫的是列，直的是行！重要重要！

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

  4. 表格的用途：主要有兩種：
    • 用來製作需要的表格，例如履歷表、課表等等；
    • 可以用來作為整體網頁的『排版』之用！非常重要的特色！

  5. 基礎表格製作，如課本 page 6-4 的說明建置該表格，表格檔案內容可下載：06_chap_06-1.txt

  6. 最外層表格，亦即 <table> 的相關屬性，可參考 page 6-5 的說明，重要的項目有：
    1. border="數字" ：邊框的厚度；
    2. cellspacing="數字" ：儲存格間的距離；
    3. cellpadding="數字" ：儲存格內容與儲存格邊界的空白距離；
    4. width="數字或百分比" ：這個表格外觀的全長寬度；
    5. height="數字或百分比" ：表格外觀的全長高度；
    6. align="left, center, right" ：表格在瀏覽器上面的位置；
    7. bgcolor="顏色" ：表格的整體顏色；
    8. background="圖檔" ：表格的底圖！重要！
    請調整上個練習中，顯示出邊框、調整資料與儲存格邊界的空白為 10 個像素，儲存格的間距為 5 個像素，結果如何？

  7. 請回到上一頁下載 images.rar ，並將該目錄在你的 www 目錄中解開，以取得底圖的圖檔。
    請取得 images/bg1.jpg 作為你的表格底圖，並且該網頁的底色顏色可調整為灰色；

  8. 表格作為排版用途！查閱 images/bg3.jpg 的圖檔，該檔案像素約為 640x400，我們知道底圖的樣式會依據瀏覽器的畫面大小而改變， 並且會導致整體資料被扭曲的問題。如果將表格定義為 640x400 ，並且將底圖加上，此時放大縮小瀏覽器畫面， 就不會影響到你的資料格式了。請依據這個樣式來處理你的表格！這題非常重要！請先做習題第一題。

  9. 表格如果作為排版之用時，可將邊框的顏色進行修改！如課本 page 6-21 所示，可使用的參數為：
    • bordercolor="顏色" ：整體表格；
    請調整上一題的內容，調整邊框色彩，讓你的網頁排版更有特色！

  10. 每列的相關屬性，亦即 <tr> 的相關屬性！可用的有：
    • bgcolor="顏色" ：可定義一整列的顏色！可與 <table> 的屬性不同！讓表格更多樣！
    • align="left, center, right" ：讓該列內的資料對齊有一致的格式！可參考 page 6-27
    • valign="top, middle, bottom" ：上面是水平對齊，這裡則是垂直對齊的位置！，參考 page 6-28 的說明
    請將上述第五點的練習加強，情況會像底下這樣：
    • 讓表格的整體寬度達 500 像素，高度達 300 像素；
    • 第一行為水平置中對齊，垂直置中對齊；
    • 第二行為水平靠右對齊，垂直方向為底部對齊；
    • 第一行底色為淺藍色，第二行則保留表格的原本色彩。

  11. 再來則是 <td> 的屬性，基本上與前面的屬性差不多，有 width, height, align, valign, bgcolor等，比較特殊的有底下這兩者：
    • colspan="數字" ：col 是橫的儲存格擴展，也就是說，在水平的方向有幾個儲存格被整合成一格；
    • rowspan="數字" ：row 是直的儲存格擴展，也就是說，在垂直的方向有幾個儲存格被整合成一格；
    接下來請進行本週習題二的練習！

  12. 請參考課本 page 6-58 的說明，並依據06_chap_06-2.txt的資料來建立你自己的想法的網頁！ 讓該網頁能夠依據 page 6-58 的類似方式來對齊！註：圖檔已經在 images/booklist.jpg 當中了！

實作題：請依照如下提示來製作本週習題：
  1. 請使用 images/bg3.jpg 作為你的預設排版，你一整頁的資料就規範在 640x400 之間！資料必須放置到此處。 請用第四週的第一個習題：chap04-1.html 檔案的內容來進行修改，更改的檔名為 chap06-1.html 。(可加上自己的創意，也可以使用自己的底色圖案來搭配！注意！不要使用有版權的圖案！)

  2. 請參考課本 page 6-40 製作出顏色對照表的表格( chap06-2.html )！，請使用網頁安全色來建置此網頁。 我要的表格尺寸大小至少為 5x10 格！且色碼會浮在該色塊上面！ 每個儲存格高度請使用預設值，平均分散每個儲存格的寬度即可！(色碼請自行調整。)

  3. 請參考課本 page 6-65 的第三題範例，製作出我們班自己的課表 (chap06-3.html) ！請注意，特色是連續課程應該要連續在一起， 不要有儲存格的分隔。

  4. 請建立如這個連結：履歷表 的履歷表 (chap06-4.html)。 你的履歷表資料至少要有：中文姓名、性別、電子郵件、現在住所(簡單寫一寫就好)、 電話(請務必使用假的電話號碼)、學歷、經歷、專業證照等項目。注意，相片部分請將您的照片貼上！(這個是重點)， 照片貼上的方法可以參考底圖，或者是使用 <img> 的項目(先請參考第八章！)

  5. 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！

回到最上方 (top)