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



瀏覽器顯示如下：