第八章、表格的應用
本章目標：
- 表格的宣告，其實表格的組成有：(1)整體表格 (2)一列 (3)每格(儲存格)。所以我們針對這三點來設計標籤。
- <table> </table>：
用來宣告整體表格的開始與結束；
- <tr> </tr>：
用來宣告一列的開始與結束；
- <td> 放置儲存格的內容文字！</td>：
這個 td 標籤內才是放置實際資料的地方喔！
- 請注意所謂的行列的宣告！參考課本 page 8-2 的說明，橫的是列，直的是行！重要重要！
- 一般表格的作法，你可以先在所見即所得的軟體上面製作好表格後，在複製原始碼到你的 HTML 檔案中。
否則設計表格式，請依據底下的範例來撰寫，會比較有層次感！
<table>
<tr>
<td> 第 1 個欄位 </td>
<td> 第 2 個欄位 </td>
<td> 第...個欄位 </td>
</tr>
<tr>
<td> 第 1 個欄位 </td>
<td> 第 2 個欄位 </td>
<td> 第...個欄位 </td>
</tr>
</table>
|
- 表格的用途：主要有兩種：
- 用來製作需要的表格，例如履歷表、課表等等；
- 可以用來作為整體網頁的『排版』之用！非常重要的特色！
- 基礎表格製作，如課本 page 8-6 的說明建置該表格，表格檔案內容可下載：chap_08_1.txt
- 最外層表格，亦即 <table> 的相關屬性，可參考 page 8-7 的說明，重要的項目有：
- border="數字" ：邊框的厚度；
- cellspacing="數字" ：儲存格間的距離；
- cellpadding="數字" ：儲存格內容與儲存格邊界的空白距離(這兩個參考 page 8-8)；
- width="數字或百分比" ：這個表格外觀的全長寬度；
- height="數字或百分比" ：表格外觀的全長高度；
- align="left, center, right" ：表格在瀏覽器上面的位置；
- bgcolor="顏色" ：表格的整體顏色；
- background="圖檔" ：表格的底圖！重要！
請調整上個練習中，顯示出邊框、調整資料與儲存格邊界的空白為 10 個像素，儲存格的間距為 5 個像素，結果如何？
- 請回到上一頁下載圖示檔 ，並將該目錄在你的 www 目錄中解開，以取得底圖的圖檔。
請取得任何一個作為你的表格底圖，並且該網頁的底色顏色可調整為灰色；
- 參考 page 8-26 ~ 8-29 建立相關的表格，讓表格更漂亮
- 表格作為排版用途！查閱 images/bg3.jpg 的圖檔，該檔案像素約為 640x400，我們知道底圖的樣式會依據瀏覽器的畫面大小而改變，
並且會導致整體資料被扭曲的問題。如果將表格定義為 640x400 ，並且將底圖加上，此時放大縮小瀏覽器畫面，
就不會影響到你的資料格式了。請依據這個樣式來處理你的表格！這題非常重要！請先做習題第一題。
- 表格如果作為排版之用時，可將邊框的顏色進行修改！可使用的參數為：
請調整上一題的內容，調整邊框色彩，讓你的網頁排版更有特色！
- 每列的相關屬性，亦即 <tr> 的相關屬性！可用的有：
- bgcolor="顏色" ：可定義一整列的顏色！可與 <table> 的屬性不同！讓表格更多樣！
- align="left, center, right" ：讓該列內的資料對齊有一致的格式！
- valign="top, middle, bottom" ：上面是水平對齊，這裡則是垂直對齊的位置！
請將上述第五點的練習加強，情況會像底下這樣：
- 讓表格的整體寬度達 500 像素，高度達 300 像素；
- 第一行為水平置中對齊，垂直置中對齊；
- 第二行為水平靠右對齊，垂直方向為底部對齊；
- 第一行底色為淺藍色，第二行則保留表格的原本色彩。
- 再來則是 <td> 的屬性，基本上與前面的屬性差不多，有 width, height, align, valign, bgcolor等，比較特殊的有底下這兩者：
- colspan="數字" ：col 是橫的儲存格擴展，也就是說，在水平的方向有幾個儲存格被整合成一格；
- rowspan="數字" ：row 是直的儲存格擴展，也就是說，在垂直的方向有幾個儲存格被整合成一格；
接下來請進行本週習題二的練習！
- 請依據chap_08_2.txt的資料來建立你自己的想法的網頁！
讓該網頁能夠對齊！
本章練習：請依照如下提示來製作本週習題：
- 請使用 images/ 內的圖示作為你的預設排版，你一整頁的資料就規範在 640x400 之間！資料必須放置到此處。
請用曾經進行過的習題內容來進行修改，更改的檔名為 。(可加上自己的創意，也可以使用自己的底色圖案來搭配！注意！
不要使用有版權的圖案！)
- 請使用網頁安全色來建置網頁。我要的表格尺寸大小至少為 5x10 格！且色碼會浮在該色塊上面！
每個儲存格高度請使用預設值，平均分散每個儲存格的寬度即可！(色碼請自行調整。)
- 請製作出我們班自己的課表！請注意，特色是連續課程應該要連續在一起，不要有儲存格的分隔。
- 請建立如這個連結：履歷表 的履歷表。
你的履歷表資料至少要有：中文姓名、性別、電子郵件、現在住所(簡單寫一寫就好)、
電話(請務必使用假的電話號碼)、學歷、經歷、專業證照等項目。注意，相片部分請將您的照片貼上！
- 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！
|