| 回教學網站 | 回網站規劃與設計首頁 | 作業繳交區 |
第六章、表格的應用(極重要啊!)

第六章內容重點:
  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)