2015年11月1日 星期日

建立HTML表格

表格是網頁設計課程中一門很重要的技巧之一,

因為表格可以收錄網頁的文字與資料內容,

所以部分的網頁資料會以表格為主軸,但是因為這幾年來表格逐漸不被採用,

網頁設計師開始採用項目清單進行編輯,也就是<ul><li>的標籤。

其中的原因我們就不多作敘述,本單元中將會介紹表格的使用方式。

欄與列

表格的概念其實不難,只要掌握好表格的特性就可以編輯,

談到表格就一定要介紹表格的結構,表格是由多個儲存格組合的群組,

在表格是由水平橫向的「列」<tr>,垂直縱向的「欄」<td>構成。

若是產生3列2欄就可以產生下列的表格。

表格尺寸

表格的尺寸單位分為「像素」與「百分比」,

像素是螢幕的實際尺寸,設定像素不會因為瀏覽器的視窗改變而影響到小,

設定百分比,表格會依照瀏覽器視窗的大小改變。


表格的尺寸是以內容資料多寡為尺寸依據,

簡單的來說表格寬度如果設定大小為400像素,

內容資料的就已經超過了這個大小,那麼表格就會被內容資料撐開,

所以同樣是設定400像素的表格,空表格的尺寸就不會有變化,

內容有資料的表格尺寸就會有不確定因素。

表格標籤

表格標籤 <table>

列<tr>:表格列的數量

欄<td>:表格欄的數量 

註解<caption>:可用於表格的說明、簡介或是表格標題的文字。 

表頭<th>:表頭主要的功能是設定標題儲存格,也就是說可以用來選擇表格第一列與第一欄的標題儲存格為標題儲存格。

表格寬度witdh:指定本表格的寬度,可以設定表格寬度的單位為百分比或是像素。

邊框粗細border:設定表格邊框的粗細。

摘要summary:可用於表格內容的說明,僅會出現在HTML標籤內,此內容並不會顯示於瀏覽器中。

沒有留言:

張貼留言