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 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的屬性還不只如此,但常用的就介紹到此,接下來我們將介紹另一個常用的元素「表單」.

arrow
arrow
    文章標籤
    HTML 學習 table tr td th colspan rowspan
    全站熱搜

    痞客興 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄