表格之設計1
這次我們要提的是表格的編製,因為表格的格式有很多種的變化,所以我們分幾次來說明,這次使用的HTML原始碼在下面,我們逐條慢慢加以說明:
首先我們先說明附註標籤,所謂附註是給程式設計的人看的,避免我們下次再看到原始碼時忘了這一段內容是在寫些什麼,所以,即使你寫在原始碼,瀏覽器也不會顯示出來!他的標籤是<!--和-->。 開始編排表格了,他是在表格的前後用table包夾的範圍內都是表格的內容!這次我們列了以下的屬性,border邊框用三個像素,高度200像素,寬度站瀏覽器的百分之三十,邊框顏色是綠色!其下就是表首caption是這個表表首名稱,其屬性預設是在上面,如果是bottom就是表首列在下面!我們先用tr(table row)表示這是列!再來開始是標題,其實也可以沒有標題,這裡我們列的標題有三分別是檳榔、香菸、烈酒,你如果用th那麼田在表格的文字會較粗大!這一列結束要再加一個tr,下一列再用兩個tr包夾住!第一個仍是標題男生,所以仍用tr,但是下一個就是表格內的資料了,我們就改用td(table data,其屬性變化極多,特別注意)男生喜歡檳榔、香菸、烈酒分別是90%、60%、70%我們把這三個資料用td包夾起來!下一列也一樣,就不說了。 我們再做一樣的表格,這回我們邊框改成紅色!不一樣的是在於td資料格內!我們把每個資料格都加上背景顏色黃色bgcolor=”yellow”,如此可以突顯這是資料的部分! 最後一個不一樣的地方是,我們表格要置中對齊,他會庚句瀏覽器的大小而調整中間位置,這次我們把瀏覽器寬度變小,他還是在中央位置!表首是兵器譜排名,現在我們要整個列的背景都用貼圖,記得要把其路徑寫對,最好是相對路徑!在此因為和網頁同一資料夾所以只要把圖的檔名寫上即可!注意,我們是在tr後面加上background的背景圖,所以這一列都會是用同一貼圖!下一列也是用貼圖,只是花色不同! 這個表最大的不同是邊框取0,所以看不出表格,但是實際的資料格式一個一個背景貼圖的區塊! 所有的HTML原始碼列在下面! 瀏覽器顯示如下: |
所有時間均為台北時間。現在的時間是 11:30 AM。 |
Powered by vBulletin® 版本 3.6.8
版權所有 ©2000 - 2024, Jelsoft Enterprises Ltd.
『服務條款』
* 有問題不知道該怎麼解決嗎?請聯絡本站的系統管理員 *