201311062029HTML 語法:TABLE(表格)

 
 

HTML 語法:TABLE(表格)


 

表格的使用對網頁的製作佔有非常重要的地位。除了文件內容有時需用到表格外,有些網頁更是用表格直接來劃分區塊。所以這裡來談談網頁製作常會用到的表格語法。

HTML 語法的表格標籤是 <TABLE> </TABLE>,裡面要定義列 <TR> </TR>、儲存格 <TD> </TD>,
內容是記錄在 <TD> </TD> 儲存格之間。而表格內是能夠再放置表格的。

底下先就各個標籤能使用的屬性做介紹,再將各個效果以實體顯示給各位看。

標籤名稱:TABLE(表格)
附屬標籤包括:TR(列)、TD(儲存格)、TH(標題格)、CAPTION(標題)
屬性名稱 屬性質 備註 說明 範例
width
height
% 或 px 值 表格寛、高 寬需為 TD 水平合計最大值 width=50%
height=300
border 數值 外框粗細 設 0 為無外框 border=3
bordercolor 色碼 外框顏色 bordercolor=色碼
cellpadding 數值 儲存格的內緣 也就是內容與格線間距 cellpadding=3
cellspacing 數值 儲存格的間距 含對外框的間距(內定值=2) cellspacing=3
bgcolor 色碼 背景色 bgcolor=色碼
background 圖檔位址 背景圖檔 圖檔位址不能是個人電腦內 background=圖址
style border-collapse: collapse 摺疊表格框線 style="border-collapse: collapse"

標籤名稱:TR & TD or TH

屬性名稱 屬性質 備註 說明 範例
width
height
% 或 px 值 儲存格寛、高 width=50%
height=300
align center
right
left
justify
置中
靠右
靠左(預設)
左右對齊
控制儲存格內容
水平置放位置
align=center
align=right
valign top
bottom
middle
baseline
靠上
靠下
置中
基線
控制儲存格內容
垂直置放位置
valign=top
valign=bottom
valign=middle
colspan 數值 水平合併 N 格 colspan=3
rowspan 數值 垂直合併 N 列 必需同欄才能合併 rowspan=2
bgcolor 色碼 背景色 背景色 bgcolor=色碼
background 圖檔位址 背景圖檔 背景圖檔 background=圖址
nowrap 不自動換行 <TH nowrap>

TH 標籤目的是在做表格標題列,作用的儲存格內容字體會變粗,有些空間會因應環境添加底圖或底色。

CAPTION(標題): 說明 範例
一般放置在 <TABLE> 與 <TR> 之間 <TABLE>
<CAPTION><H2>六月份業績表</H2></CAPTION>
<TR><TD>
………

TABLE 要於頁面定位,可以利用 <DIV> 或是 <P>。例如:<DIV align="center"> 或 <P align="center">

另外,儲存格內可以定義幾乎所有 HTML 的其他標籤。


接下來將就上面各標籤的屬性,由淺開始做出各個實體顯示效果。最好是自己把左側語法先貼到您的場所測試看效果,因為各家網路公司所給的語法環境並不相同。

範例語法 左側語法的顯示效果

單列表示法:

<TABLE border=1>
<TD>格子1</TD>
<TD>格子2</TD>
</TABLE>

格子1 格子2
多例表示法:

<TABLE border=1>

<TR>

<TD>第1列,第1格</TD>
<TD>第1列,第2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列,第1格 第1列,第2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格
定義內緣距離:

<TABLE border=1 cellpadding=15>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
定義儲存格間隔距離:

<TABLE border=1 cellspacing=15>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
內緣距與儲存格距的分別:

<TABLE border=1 cellpadding=15 cellspacing=15>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
定義外框粗細:儲存格線無法定義粗細

<TABLE border=15 cellpadding=8 cellspacing=8>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
摺疊表格框線

<TABLE border=8 cellpadding=15 cellspacing=15 style="border-collapse: collapse">

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
定義框色:

<TABLE border=8 cellpadding=15 cellspacing=15 bordercolor=800000>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
定義背景色:

<TABLE border=8 cellpadding=15 cellspacing=15 bordercolor=800000 bgcolor=008000>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
定義框距:因框距設為 0,所以框色的定義成為無意義了

<TABLE border=0 cellpadding=15 cellspacing=15 bordercolor=800000 bgcolor=008000>

<TR>
<TD>1列1格</TD>
<TD>1列2格</TD>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格
TD TH 的差別:

<TABLE border=1>

<TR>
<
TH>1列1格</TH>
<TH>1列2格</TH>
</TR>

<TR>
<TD>2列1格</TD>
<TD>2列2格</TD>
</TR>

</TABLE>

1列1格 1列2格
2列1格 2列2格

TH 屬性的顯示
會依您網頁放置的網站而不同
這裡因放在 Google 所以呈現藍色底圖
放於不同部落格亦依其內設而現
在 IE 是僅以粗體字表示
當然,字體是可以另外控制的

合併欄(垂直儲存格)

<TABLE border=1>

<TR>
<TD
rowspan=2>第1-2列<BR>
第1格</TD>
<TD>第1列,第2格</TD>
</TR>

<TR>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1-2列
第1格
第1列,第2格
第2列,第2格
第3列,第1格 第3列,第2格
合併列(水平儲存格)

<TABLE border=1>

<TR>
<TD
colspan=2>第1列第1-2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列第1-2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格
儲存格內容置中

<TABLE border=1>

<TR>
<TD colspan=2
  align=center >第1列第1-2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列第1-2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格
設置表格底圖

<TABLE border=1  background=圖1位址 >

<TR>
<TD colspan=2  align=center>第1列第1-2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列第1-2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格
設置儲存格底圖(第2、3列,用的是表格底圖)

<TABLE border=1 background=圖1位址>

<TR>
<TD colspan=2 align=center
background=圖2位址>
第1列第1-2格
</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列第1-2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格
表格主題(這是依附在表格的)

<TABLE border=1>

<CAPTION>表格展示</CAPTION>

<TR>
<TD>第1列,第1格</TD>
<TD>第1列,第2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

</TABLE>

表格展示
第1列,第1格 第1列,第2格
第2列,第1格 第2列,第2格

CAPTION 標籤的顯示
會依您網頁放置的網站而不同
這裡因放在 Google 所以呈現綠色底圖
放於不同部落格亦各依其內設而現
在 IE 是僅以內文字表示
當然,字體是可以另外控制的

儲存格內同樣可以定義文字標籤

<TABLE border=1>

<TR>
<TD colspan=2  align=center>
<FONT face="標楷體" size=5>第1列第1-2格</FONT>
</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

<TR>
<TD>第3列,第1格</TD>
<TD>第3列,第2格</TD>
</TR>

</TABLE>

第1列第1-2格
第2列,第1格 第2列,第2格
第3列,第1格 第3列,第2格

接下來要談的是比較麻煩的寛度定義。表格的寬,在各個網站所展現的方式是不一的。像是在 Yahoo 部落格,他根本不管你如何定義,對格寬及框粗細都是不理睬的。

右側表格使用的語法 左側語法的顯現及說明

<TABLE border=1 bordercolor=800000 width=100%>

<TR>
<TD>第1列,第1格</TD>
<TD>第1列,第2格</TD>
</TR>

<TR>
<TD>第2列,第1格</TD>
<TD>第2列,第2格</TD>
</TR>

</TABLE>
第1列,第1格 第1列,第2格
第2列,第1格 ABCDEFGHIJKLMNOPQRSTUVWXYZ

這裡是讓表格延伸到可用空間的 100%
儲存格如未定義寬
他的欄寬是依各欄最大內容去調整寬度比例的
要注意的是【寬度】是【整欄】一齊改變的

<TABLE border=1 bordercolor=800000 width=350>

<TR>
<TD width=50>第1列,第1格</TD>
<TD width=100>第1列,第2格</TD>
<TD width=200>第1列,第3格</TD>
</TR>

<TR>
<TD width=50>第2列,第1格</TD>
<TD width=100>第2列,第2格</TD>
<TD width=200>第2列,第3格</TD>
</TR>

</TABLE>
1-1 1-2 第1列,第3格
2-1 第2列,第2格 第2列,第3格

這裡是使用 px 定義儲存格的寬
當內容到達寬度界限時,將會自動折行

<TABLE border=1 bordercolor=800000 width=100%>

<TR>
<TD width=50>第1列,第1格</TD>
<TD width=100>第1列,第2格</TD>
<TD>第1列,第3格</TD>
</TR>

<TR>
<TD width=50>第2列,第1格</TD>
<TD width=100>第2列,第2格</TD>
<TD>第2列,第3格</TD>
</TR>

</TABLE>
第1列,第1格 第1列,第2格 第1列,第3格
第2列,第1格 第2列,第2格 第2列,第3格

這是混合型定義,先將表格寛定為 100%
第1、2儲存格定義固定寬
第3儲存格未定義,將會承受剩餘的寬度


接下來做一些表格運用的範例讓大家參考

<TABLE border=1 cellpadding=5 cellspacing=0 width=100%>
<TR>
<TD width=50% align=center>A1</TD>
<TD width=50% align=center>A2</TD>
</TR>
</TABLE>

<TABLE border=1 cellpadding=5 cellspacing=0 width=100%>
<TR>
<TD width=33% align=center>B1</TD>
<TD width=33% align=center>B2</TD>
<TD width=34% align=center>B3</TD>
</TR>
</TABLE>

<TABLE border=1 cellpadding=5 cellspacing=0 width=100%>
<TR>
<TD width=25% align=center>C1</TD>
<TD width=25% align=center>C2</TD>
<TD width=25% align=center>C3</TD>
<TD width=25% align=center>C4</TD>
</TR>
</TABLE>

<TABLE border=1 cellpadding=5 cellspacing=0 width=100%>
<TR>
<TD width=20% align=center>D1</TD>
<TD width=20% align=center>D2</TD>
<TD width=20% align=center>D3</TD>
<TD width=20% align=center>D4</TD>
<TD width=20% align=center>D5</TD>
</TR>
</TABLE>
A1 A2
B1 B2 B3
C1 C2 C3 C4
D1 D2 D3 D4 D5

上面範例解說:

這是為因應各列儲存格是不規則而做的
等於是每列各做一個表格
而各表格間不使用 P 或 BR做分隔
這就能夠緊密各表格了

另一種方法是
把每一列先隔成最小公倍數格
再逐列去合併所需的儲存格
但是這種方式在多列時是很麻煩的

<TABLE cellSpacing=0 cellPadding=8 bgColor=FF0000 border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
FF7F00 border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
FFFF00 border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
60BF00 border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
00FFFF border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
FF00FF border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=8 bgColor=
A040FF border=0><TR><TD>
<TABLE cellSpacing=0 cellPadding=0 bgColor=FFFFFF border=0><TR><TD>

您可以把文章區的外框<BR>
變成五顏六色的彩色框<BR>
當然也可以改用圖檔<BR>
來代替底色

</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
您可以把文章區的外框
變成五顏六色的彩色框
當然也可以改用圖檔
來代替底色
<TABLE border=1 cellpadding=5>
<TR><TD background=
圖檔位址>
可以利用底圖來區隔各個主題區<br>
這種表格方式的利用<br>
可以將您的內文區變得更加生動<br>
</TD></TR>
<TR><TD background=
圖檔位址>
可以利用底圖來區隔各個主題區<br>
這種表格方式的利用<br>
可以將您的內文區變得更加生動<br>
</TD></TR>
<TR><TD background=
圖檔位址>
可以利用底圖來區隔各個主題區<br>
這種表格方式的利用<br>
可以將您的內文區變得更加生動<br>
</TD></TR>
</TABLE>
可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動
可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動
可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動

 

平均分數:0 顆星    投票人數:0
我要評分:
回應
累積 | 今日
loading......
關鍵字
夜星欄位






Powered by Xuite
暗夜孤星