HTML 語法：TABLE（表格） - 隨意窩

HTML 語法：TABLE（表格） ; width height, % 或px 值, 表格寛、高 ; border, 數值, 外框粗細 ; bordercolor, 色碼, 外框顏色 ; cellpadding, 數值, 儲存格的內緣 ; cellspacing ... sunnyi25這裡記錄了我的點點滴滴！....請多多指導~..廣結善緣...日誌相簿影音好友名片 200909161955HTML語法：TABLE（表格）?網路教學 HTML語法：TABLE（表格） HTML語法：TABLE（表格）   表格的使用對網頁的製作佔有非常重要的地位。

除了文件內容有時需用到表格外，有些網頁更是用表格直接來劃分區塊。

所以這裡來談談網頁製作常會用到的表格語法。

HTML語法的表格標籤是

　，裡面要定義列　、儲存格　，內容是記錄在　儲存格之間。

而表格內是能夠再放置表格的。

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

標籤名稱：TABLE（表格）附屬標籤包括：TR（列）、TD（儲存格）、TH（標題格）、CAPTION（標題）屬性名稱屬性質備註說明範例 widthheight %或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&TDorTH 屬性名稱屬性質備註說明範例 widthheight %或px值 儲存格寛、高 　 width=50%height=300 align centerrightleftjustify 置中靠右靠左（預設）左右對齊 控制儲存格內容水平置放位置 align=centeralign=right valign topbottommiddlebaseline 靠上靠下置中基線 控制儲存格內容垂直置放位置 valign=topvalign=bottomvalign=middle colspan 數值 水平合併N格 　 colspan=3 rowspan 數值 垂直合併N列 必需同欄才能合併 rowspan=2 bgcolor 色碼 背景色 背景色 bgcolor=色碼 background 圖檔位址 背景圖檔 背景圖檔 background=圖址 nowrap 　 不自動換行 　 TH標籤目的是在做表格標題列，作用的儲存格內容字體會變粗，有些空間會因應環境添加底圖或底色。

CAPTION（標題）：說明範例 一般放置在與之間

六月份業績表

……… TABLE要於頁面定位，可以利用 或是 。 例如：或 另外，儲存格內可以定義幾乎所有HTML的其他標籤。 接下來將就上面各標籤的屬性，由淺開始做出各個實體顯示效果。 最好是自己把左側語法先貼到您的場所測試看效果，因為各家網路公司所給的語法環境並不相同。 範例語法左側語法的顯示效果 單列表示法：

格子１

格子２

格子１ 格子２ 多例表示法： 第１列，第１格 第１列，第２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列，第１格 第１列，第２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 定義內緣距離： １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 定義儲存格間隔距離： １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 內緣距與儲存格距的分別： １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 定義外框粗細：儲存格線無法定義粗細 １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 摺疊表格框線 １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 定義框色： １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 定義背景色： １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 定義框距：因框距設為0，所以框色的定義成為無意義了 １列１格 １列２格 ２列１格 ２列２格 １列１格 １列２格 ２列１格 ２列２格 TD與TH的差別： １列１格 １列２格 ２列１格 ２列２格 １列１格１列２格 ２列１格 ２列２格 TH屬性的顯示會依您網頁放置的網站而不同這裡因放在Google所以呈現藍色底圖放於不同部落格亦依其內設而現在IE是僅以粗體字表示當然，字體是可以另外控制的 合併欄（垂直儲存格） 第１-２列
第１格第１列，第２格 第２列，第２格 第３列，第１格 第３列，第２格 第１-２列第１格 第１列，第２格 第２列，第２格 第３列，第１格 第３列，第２格 合併列（水平儲存格） 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 儲存格內容置中 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 設置表格底圖 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 設置儲存格底圖（第２、３列，用的是表格底圖） 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 表格主題（這是依附在表格的） 表格展示 第１列，第１格 第１列，第２格 第２列，第１格 第２列，第２格 表格展示 第１列，第１格 第１列，第２格 第２列，第１格 第２列，第２格 CAPTION標籤的顯示會依您網頁放置的網站而不同這裡因放在Google所以呈現綠色底圖放於不同部落格亦各依其內設而現在IE是僅以內文字表示當然，字體是可以另外控制的 儲存格內同樣可以定義文字標籤 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 第１列第１-２格 第２列，第１格 第２列，第２格 第３列，第１格 第３列，第２格 接下來要談的是比較麻煩的寛度定義。

表格的寬，在各個網站所展現的方式是不一的。

像是在Yahoo部落格，他根本不管你如何定義，對格寬及框粗細都是不理睬的。

右側表格使用的語法左側語法的顯現及說明 第１列，第１格 第１列，第２格 第２列，第１格 第２列，第２格 第１列，第１格 第１列，第２格 第２列，第１格 ABCDEFGHIJKLMNOPQRSTUVWXYZ 這裡是讓表格延伸到可用空間的100%儲存格如未定義寬他的欄寬是依各欄最大內容去調整寬度比例的要注意的是【寬度】是【整欄】一齊改變的 第１列，第１格第１列，第２格第１列，第３格 第２列，第１格第２列，第２格第２列，第３格 １－１ １－２ 第１列，第３格 ２－１ 第２列，第２格 第２列，第３格 這裡是使用px定義儲存格的寬當內容到達寬度界限時，將會自動折行 第１列，第１格第１列，第２格第１列，第３格 第２列，第１格第２列，第２格第２列，第３格 第１列，第１格 第１列，第２格 第１列，第３格 第２列，第１格 第２列，第２格 第２列，第３格 這是混合型定義，先將表格寛定為100%第１、２儲存格定義固定寬第３儲存格未定義，將會承受剩餘的寬度 接下來做一些表格運用的範例讓大家參考 A1A2 B1B2B3 C1C2C3C4 D1D2D3D4D5 A1 A2 B1 B2 B3 C1 C2 C3 C4 D1 D2 D3 D4 D5 　 上面範例解說： 這是為因應各列儲存格是不規則而做的等於是每列各做一個表格而各表格間不使用P或BR做分隔這就能夠緊密各表格了 另一種方法是把每一列先隔成最小公倍數格再逐列去合併所需的儲存格但是這種方式在多列時是很麻煩的 您可以把文章區的外框
變成五顏六色的彩色框
當然也可以改用圖檔
來代替底色 您可以把文章區的外框變成五顏六色的彩色框當然也可以改用圖檔來代替底色 可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動
可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動
可以利用底圖來區隔各個主題區
這種表格方式的利用
可以將您的內文區變得更加生動
可以利用底圖來區隔各個主題區這種表格方式的利用可以將您的內文區變得更加生動 可以利用底圖來區隔各個主題區這種表格方式的利用可以將您的內文區變得更加生動 可以利用底圖來區隔各個主題區這種表格方式的利用可以將您的內文區變得更加生動 希望大家使用順手愉快。

sunnyi25/Xuite日誌/回應(1)/引用(0)沒有上一則|日誌首頁|沒有下一則回應 加我為好友日誌相簿影音 我的相簿 sunny625's新文章麥克阿瑟為子祈禱文~轉載吉祥经（MaGgalaSutta）後台朋友日本佛教電影-禪很棒健康自療法(真人示範)---易學易懂無是非對錯~無際大師心之藥方菩薩求學五明為了使無上正等菩提大智資糧的圓滿載福之道【菜根譚】1~人我之忌 全部展開|全部收合 sunny625's新回應沒有新回應！ 關鍵字