HTML的學習課程-第一章 架構的認識
HTML的學習課程-第二章 標籤的類別
本文我們將接續上一章,來介紹常用的標籤,表格元素是非常重要的一環,所以我們先介紹這個元素.
首先先說明它的位置,它會放在<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)時,它的思考方式會是,這個表格總共會有幾列(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的主要變化,那接下來就是關於表格的邊框,內容與邊框距離,欄位與欄位間的距離的調整方法,相關的屬性如下
width="50%"設定表格佔整個頁面寬度的百分比,也可使用如100px的像素表示方法,但如果想隨畫面自動增大或縮小,用百分比是較好的.
border="1"設定表格的邊框粗細,數字可以依需要調整,如果要無框可以設為0
cellspacing="2px"設定表格內每個<td>中間的間隔大小,數字依需求改變.
cellpadding="2px"設定<td>裡的內容到邊框的距離,數字依需求改變.
當然table的屬性還不只如此,但常用的就介紹到此,接下來我們將介紹另一個常用的元素「表單」.
留言列表
綜合知識 (3)
