網頁標題: 介紹表格標籤 (table)

Warning: fopen(/home/crazy/www/learner/cpuroom/programmer/has_read.php): failed to open stream: Permission denied in /home/crazy/www/compose/reading.php on line 2077

Warning: fputs() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2079

Warning: fclose() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2080
 
﹗﹗﹗觀看留言:此文章已經有5則留言 ﹗﹗﹗



我們在這幾篇 php 的文件分享中學了與 html 有關的一些東西,
甚至偶爾還夾雜幾個 javascript 程序,
由於 php 屬於後端程序處理,
它所處理的資料大多都來自表單,
而表單又需要牽涉到驗證的工作,
因此在真正開始學習 php 之前,
一些表單處理的技巧我會根據自己所知道的一點點兒之識跟大家分享。
坦白說我懂的真的很少,
我盡力而為,
希望在分享的過程中自己可以學的更多。

不知大家玩過 在表單加入 label 標籤 阿金師的灶咖這個表單以後有什麼發現呢?
我自己其實在這張表單裡就有許多新的發現喔!
坦白說再開始寫的時候有些內容自己還不太有把握,
因此都得要再向人請教,
或者上網搜尋學習。

為了試著學習表格應用方式, 我在那個表單使用了 table 標籤,
把所有廚師所能供應的美食放在其內,
這一來也可以看看視覺效果如何?
table 標籤主要包含三種子標籤。

「什麼叫做『子標籤』呀?」

嘿嘿! 為了方便表達,
這又是我發明的另一種新名詞哈哈!
我並不曉得其他教學文件是否也用同樣的表達方式,
在我自己的文章中,
凡是某個標籤包含在另個標籤內的狀況,
被包在中間的就是外面那個標籤的「子標籤」,
而抱在外面那個自然可以稱為其中那些標籤的「母標籤」了。
譬如 html 之中就有 head 和 body 兩個子標籤。
這樣大家就瞭解以後當我提到「子標籤」時指的是什麼了吧?

這篇文章要談的是表格標籤, 所以它們都要包在 table 這個母標籤之內,
而她最重要的子標籤就是tr,
tr 的下面又有 th 和 td 這兩個子標籤。
有點頭暈是不是?
反正表格的標籤 table 最大,
再來就是 tr,
接下來是 th 跟 td,
這落落長一串只是要說明這件事啦!
接下來就介紹一下它們的用法。

剛才說過在 table 標籤裡有一個很重要的子標籤叫做 tr, 一組 tr 代表一列,
一列中要分成幾欄,
就要在 tr 裡設定幾組 th 或者 td。
th 與 td 的差別在於,
th 中的內容會自動置中對齊並以粗體字顯示,
通常放在表格的最上方那一列,
所以我把它叫做「標頭格」,
而把 td 叫做「儲存格」。
舉個例子說明好了,
假如你要寫一個二列三欄的表格,
最上面那列要用粗體字置中對齊,
其語法如下:


<table>
<tr>
<th> 1-1 </th>
<th> 1-2 </th>
<th> 1-3 </th>
</tr>

<tr>
<td> 2-1 </td>
<td> 2-2 </td>
<td> 2-3 </td>
</tr>

</table>

在這段表格代碼中, 每組 tr 之間有三組 th 或 td,
也就是每一橫列中有三個格子,
第一列是用粗體呈現的標頭。
當然,
如果你不想用標頭,
而希望每個格子以相同的方式表現,
就不要用 th 標籤,
全部使用 td。

你大概也覺得表格標籤真是麻煩, 一大堆 tr、td 搞得人昏頭轉向,
還好撰寫表格標籤時,
省略了 tr、th 或 td 的結束標籤還是可以達到相同效果,
不過 table 的結束標籤可千萬省不得,
因此上面的表格可以這樣子改寫:


<table>
<tr>
<th> 1-1
<th> 1-2
<th> 1-3

<tr>
<td> 2-1
<td> 2-2
<td> 2-3

</table>

這樣是不是簡單一點了呢? 你也許已經發現在那個「阿金師的灶咖」裡的表格也是這樣寫的。
最後,
我們還必須知道表格標籤的一些屬性。
請大家無論如何要記住,
所有標籤的屬性都一定釋放在開始標籤的標籤名稱之後的。
table 這個標籤我常用到的有 width 和 border 兩個屬性,
width 代表寬度,
其單位為px(像素),
寬度也可用百分比來作設定,
如50%即表示寬度佔螢幕百分之五十。
border 代表表格框線的粗細。
如果想用表格方式呈現網頁內容,
卻又希望不要出現框線,
就把框線設為零 「border=0」,
這樣就可以利用 table 作為版面編排方式。

table 的 width 可以設定整個表格的寬度, 而如果想設定欄位的寬度就在 th 或 td 裡使用這個屬性,
以上面的例子來說,
假如 table width=100%,
也就是表格和瑩幕同寬,
那麼每一個 tr 裡頭的三個 th 或者 td,
它們的總和也就要在 100% 之內,
你可以把這三個格子,
其中兩個社寬度為 25%,
剩下一個是 50%,
三個合起來就是 100% 了。

其實 table 還有許多屬性, 不過我自己不熟悉也無法在此介紹,
它們大都跟視覺效果有關,
例如設定文字對齊方式、
整個表格或每一列甚至每一格的背景顏色等等,
雖然我們看不到瑩幕上的效果,
但還是可以多少學一點,
將來只要有明眼朋友稍微幫忙,
我們照樣可以設計出多采多姿美倫美煥的網頁。


本文張貼者:程咬金〔張貼時間:民國101年7月9日(星期一)19點50分〕 感謝 亮亮 幫助校稿 | 寫信給程咬金

部落格首頁


學習的故鄉首頁
本站公告:〔您越需要我們,我們就越有創意〕 本站說明書:〔發現故鄉還有改進的地方,請來信告訴原丁們〕
觀察應用學習點數 :〔咱的故鄉有您的參與,會使我們有更大的發揮空間,展現更豐富精彩的學習畫面〕 〔期待藉由無障礙網頁設計,能讓視障小朋友更愛看書、更愛寫作且更愛學習〕:盲用電腦「心得分享」
〔為了讓我們有乾淨的學習環境,請勿任意在本站散播商業廣告與不合法文件或聯結〕:本站宣示