8-1认识表格.pptVIP

8-1　認識表格 不論網站設計中到底包含了多少的高深技術，如何做出一個有內容、美麗並且瀏覽者願意再度參觀的網站才是網站設計的最後目的。因為網站是讓大家看的，透過網站的內容達到特定的目的，通常是被利用在商業宣傳或是購買行為的用途。多數的網站所面對的是一般的消費大眾，對這些人在瀏覽網站時並不會在意您使用了哪些技術來完成您的網站。他們在乎的是網頁下載速度快不快、網頁內容有沒有想看的東西、能不能勾起他們的興趣繼續瀏覽網頁，甚至進而產生商業行為。 認識欄、列與儲存格 底下先來看看表格的定義，認識表格的基本元素。表格主要是由三項元素所形成，分別是直排的欄、橫排的列以及儲存格。直排的為欄、橫排為列，而表格中所形成的每個格子則稱為儲存格。 認識框線與間距 過去在文書處理軟體中，表格只要設定欄、列再輸入資料即可，並不會花心思去設計表格的色彩、風格，但網頁中為了配合網站的風格，表格的變化也得更多。製作表格除了欄、列之外，還有幾個設定是必須注意的。 透過圖8-3可以清楚的看到當您設定不同的表格屬性，就可以讓表格的模樣看起來完全不同了。 表格框線：整個表格的外框線，可設定框線的顏色、粗細和樣式。 儲存格框線：設定個別儲存格的框線顏色、粗細等屬性。 儲存格間距：儲存格和儲存格之間的距離。 表格邊框距離：儲存格和外框框線的距離。 有些人會將項目文字歸類在表格之下，因為項目文字也是列表式的排列，可算是單欄多列的表格，只是沒有加上框線而已。當你用表格來編排網頁的版面時，也經常用到沒有設定框線的表格，圖8-4、圖8-5兩張圖分別是有框線的表格和沒有顯示框線的表格，看起來感覺就不太相同了吧！ 圖8-4 圖8-5 8-2　表格欄、列的設定 對於網頁設計工作者而言，表格是一項非常重要的基本排版工具，可以說不會表格就不能設計網頁，因為它普遍被使用在版面劃分的用途上，再一一將圖片、文字或其他設計元素加到表格的儲存格中。 插入第一個簡易表格 在HTML文件中加入表格是透過TABLE來設定，不論是有框線的表格或是沒有框線的無形表格，都是同一個標籤，只是屬性值不同而已。要製作出最簡單的表格，除了表格標籤之外，再加上欄、列的設定，底下來看看製作表格的標籤。 TABLE/TABLE表格標籤 產生表格的標籤，其他的表格標籤都必須放在這組標籤之內，才能發揮作用。 CAPTION/CAPTION表格標題文字 替表格加上標題，在既有的表格上方加入標題也就是表頭，這個標籤必須要加在TABLE標籤 TH/TH設定欄位標題名稱 用來定義每個欄位的標題名稱，當你在製作表格需要透過說明文字來告知每一欄資料的意義，這時就使用TH標籤，同樣這個標籤組必須放在TR標籤組之內，通常只有第一欄才需要定義名稱。 BORDER讓表格加上框線 BORDER屬性會設定讓表格加上框線，當表格沒有顯示框線時，代表BORDER的屬性值為0，開啟光碟資料夾中的實作01-1.htm，繼續設定其他的屬性，首先是在TABLE標籤中加入BORDER屬性。設定後馬上就會看到表格的框線了，修改後的範例如圖8-7。 table border 上個範例中並沒有設定表格框線的粗細，這時會使用預設值來進行設定。表格框線的單位是px(圖點)和設定圖片外框是一樣的，直接在BORDER的屬性後面加上屬性值即可，例如筆者希望將表格的框線為5px，那程式碼會更改如下。 table border=5 設定表格的大小(寬、高) 當你沒有設定表格的寬度和高度時，表格的寬度能容納就是所輸入資料的長度，這時表格的框線和文字是緊密排列的，這樣的表格實在不好看。所以我們必須設定表格的大小，讓其統一。特別是當網頁中有相當多表格的時候，不同尺寸的表格放在一起實在不好看。 使用WIDTH來設定寬度 當你要設定表格的寬度時有二種設定方法，一種是直接輸入表格寬度的數值，也就是固定大小。這時不論表格中的資料有多少表格的寬度都是固定的。 table border=2 width=300 如圖8-9就是原本設定寬度為300px的表格，但因為表格的文字過多，所以整個表格的寬度雖然不變但列高改變了，而且每欄寬度也依字數來調整，才能容納這麼多的文字。 圖8-9 透過HEIGHT來調整高度 一般表格的列高會直接輸入數值，而且數值也不會設太大，這當然是考慮到視窗的美觀，圖8-11是分別設定為百分比『80%』的表格。 table border=2 width=50%height=80% 寬度不變而將寬度設定為『120』px，變更後的表格看起來就順眼多了。當表格的高度設定小於文字的高度時，同樣這個屬性也會失去效用喔！ table border=2 width=50%height=120 表格標題的變化 表格的標題文字預設是放在整個表格的上方，也就是所謂的表頭，若你希望將表格的標題放在表格的下方