本文我們將接續上一章,來介紹常用的標籤,表格元素是非常重要的一環,所以我們先介紹這個元素.
首先先說明它的位置,它會放在<body></body>中間,表格元件包含幾個標籤,介紹如下
<table></table>這個標籤是表格的最外層,是告訴瀏覽器我現在要顯示一個表格,如果你的body內有二個table,就表示同一個網頁裡有二個獨立的表格.
<tr></tr>這個標籤會放在<table></table>裡,告訴瀏覽器表格內有幾列(橫的叫列),若一個table裡有三對<tr></tr>,就表示有這個表格內有三列.
<td></td>這個標籤會放在<tr></tr>裡,告訴瀏覽器每一列中有幾個欄位,假如一個tr裡有三對<td></td>,就表示一列包含三個欄位.
<th></th>這個標籤基本上和td相同,但它會以表頭方式顯示,內容文字會加粗字體.
現在我們利用這些標籤來實作一個例子,做一個3列X3欄的表格
建立三列三欄的表格<table border="1">
<tr>
<td>第一列的第一欄</td>
<td>第一列的第二欄</td>
<td>第一列的第三欄</td>
</tr>
<tr>
<td>第二列的第一欄</td>
<td>第二列的第二欄</td>
<td>第二列的第三欄</td>
</tr>
<tr>
<td>第三列的第一欄</td>
<td>第三列的第二欄</td>
<td>第三列的第三欄</td>
</tr>
</table>
在瀏覽器裡會顯示如下,一個三列三欄的表格
| 第一列的第一欄 | 第一列的第二欄 | 第一列的第三欄 |
| 第二列的第一欄 | 第二列的第二欄 | 第二列的第三欄 |
| 第三列的第一欄 | 第三列的第二欄 | 第三列的第三欄 |
所以當你要規劃一個表格(table)時,它的思考方式會是,這個表格總共會有幾列(tr),而每一列會放幾個欄位(td),接著把<td></td>放到<tr></tr>內,全部都放完後再整個放到<table></table>內就完成了.
接著我們再把功能擴大,有時侯表格會用到跨欄的顯示,如果依照上面介紹的標籤是做不到的,所以我們要介紹二個屬性colspan及rowspan來達成,說明如下
rowspan(row span)列的合併,使用方法是在<tr>或<td>加上屬性,<td rowspan="2"></td>,意思就是我要合併目前的列和往下的一個列,當然視需求你可合併多個列.
colspan(column span)欄的合併,使用方法是在<tr>或<td>加上屬性,<td colspan="2"></td>,意思就是我要合併目前的欄和往右的一個欄,當然視需求你可合併多個欄.
基本概念是不管你要合併幾個列幾個欄,記住這個rowspan或colspan的屬性,你要上在最左上角的那個<tr>或<td>,接著我們以上面的例子來做合併的測試
合併儲存格<table border="1">
<tr>
<td colspan="3">第一列的第一欄</td>
</tr>
<tr>
<td rowspan="2">第二列的第一欄</td>
<td>第二列的第二欄</td>
<td>第二列的第三欄</td>
</tr>
<tr>
<td>第三列的第二欄</td>
<td>第三列的第三欄</td>
</tr>
</table>
當我們在第一列的第一個<td>加了colspan="3"這個屬性,表示這個<td>會往右合併另外二個<td>,所以可以看到第一個<tr>裡原本有三個<td>,現在只留一個就行了,而第一列也就如下成為了合併的儲存格.
而接下來我們要合併第二列和第三列的第一欄,所以在最左上的<td>來加上屬性,我們在第二列的第一個<td>加上了rowspan="2",這時侯第三列的第一欄會被第二列的第一欄合併,所以你有注意到嗎??第三列的<td>也只留下二個,而原先的第三列第一欄就不用寫上去了.
| 第一列的第一欄 | ||
| 第二列的第一欄 | 第二列的第二欄 | 第二列的第三欄 |
| 第三列的第二欄 | 第三列的第三欄 |
經過以上的練習,我們就學習了table的主要變化,那接下來就是關於表格的邊框,內容與邊框距離,欄位與欄位間的距離的調整方法,相關的屬性如下
width="50%"設定表格佔整個頁面寬度的百分比,也可使用如100px的像素表示方法,但如果想隨畫面自動增大或縮小,用百分比是較好的.
border="1"設定表格的邊框粗細,數字可以依需要調整,如果要無框可以設為0
cellspacing="2px"設定表格內每個<td>中間的間隔大小,數字依需求改變.
cellpadding="2px"設定<td>裡的內容到邊框的距離,數字依需求改變.
width屬性的作用<table border="1" width="50%">
<tr>
<td>50%</td>
</tr>
</table>
<table border="1" width="25%">
<tr>
<td>25%</td>
</tr>
</table>
可以看到我們設定了二個table,分別給予width="50%"及width="25%"的屬性,在網頁上的顯示寬度就有差異了,依顯示需求給予.
| 50% |
| 25% |
border屬性的作用
<table border="1" width="50%" border="5">
<tr>
<td>50%</td>
</tr>
</table>
<table border="1" width="25%" border="1">
<tr>
<td>25%</td>
</tr>
</table>
可以看到border="5"的邊框很粗,border="1"的邊框較細,如果不要邊框則設定為0
| 50% |
| 25% |
cellpadding屬性的作用
<table border="1" width="50%" border="5" cellpadding="10px">
<tr>
<td>50%</td>
</tr>
</table>
<table border="1" width="25%" border="1" cellpadding="1px">
<tr>
<td>25%</td>
</tr>
</table>
cellpadding的數值越大,可以看到內容到邊框間的距離就越大.
| 50% |
| 25% |
cellspacing屬性的作用
<table border="1" width="50%" border="1" cellspacing="1px">
<tr>
<td>25%</td>
<td>25%</td>
</tr>
</table>
<table border="1" width="50%" border="1" cellspacing="10px">
<tr>
<td>25%</td>
<td>25%</td>
</tr>
</table>
cellspacing是指定邊框的寬度,下面結果就可以看到對邊框的影響
| 25% | 25% |
| 25% | 25% |
當然table的屬性還不只如此,但常用的就介紹到此,接下來我們將介紹另一個常用的元素「表單」.
綜合知識 (3)