史萊姆論壇

史萊姆論壇 (http://forum.slime.com.tw/)
-   程式 & 網頁設計技術文件 (http://forum.slime.com.tw/f138.html)
-   -   表格之設計1 (http://forum.slime.com.tw/thread205265.html)

猜謎人 2007-05-13 10:23 AM

表格之設計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原始碼列在下面!

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/y001.jpg

瀏覽器顯示如下:

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/y002.jpg


所有時間均為台北時間。現在的時間是 11:30 AM

Powered by vBulletin® 版本 3.6.8
版權所有 ©2000 - 2024, Jelsoft Enterprises Ltd.

『服務條款』

* 有問題不知道該怎麼解決嗎?請聯絡本站的系統管理員 *


SEO by vBSEO 3.6.1