Wikipedia,自由的百科全书
表格可以直接借助HTML的表格元件來製作,或是透過wiki格式語言在wiki網頁予以定義。 HTML表格元件與相關的使用方式在各式的網頁都有詳細的說明於此不再贅述。使用wiki格式語言,相較於HTML表格元件的好處是當表格以字元符號架構出來的,使得你更容易的以文章編輯的角度看出表格的舖排樣子。
經驗上,除非必要,應盡量避免使用表格。表格的標示語言通常複雜化了頁面的編輯。
Wiki標示語言一覽
| {| | 表格起始
|
| |+ | 表格標題, 選用;每張表格只能出現一次且介於表格起始與第一行
|
| |- | 表格行, 第一行選用 -- wiki引擎會假設是第一行
|
| ! | 表格標題儲存格, 選用。 可以使用(!!)在同一行加入接續的表格標題或是單獨使用(!)換新的一行。
|
| | | 表格資料儲存格, 必要!可以使用(||)接續表格資料儲存格或是單獨使用 (|)。
|
| |} | 表格結束
|
- 上述符號必須出現在新行的開頭除了當在同一行中想要延續儲存格所增用的雙||與!! 。
- XHTML屬性。每一個符號,除了表格的末尾,可選擇性的接受一或多個XHTML屬性。屬性必須與符號在同一行。請使用一個空格隔開每一項屬性。
- 儲存格與標題(|或是||,!或是!!,以及|+)持有表格內容。所以要使用單線(|)來區隔屬性與內容。儲存格內容可以都位在同一行或是換到另一行。
- 表格與行的符號({|與|-)並不直接持有內容。在它們的屬性之後請不要加入管線(|)。如果你在表格與行符號的屬性之後錯誤的加入管線符號,剖析器會將之刪除以及之後任何觸及該出錯管線的屬性!
- 內容 (a)可以任何選用的XHTML屬性之後跟著同一行它的儲存格標記或是(b)儲存格標記的下一行。使用wiki標示語言的內容本身需要自新的一行開始,例如清單,表頭,或是表格內接的表格,必須在它自個兒的新行。
簡單的表格
普通
下面這個表格沒有外框與留白,但是顯示了最簡單的wiki表格標示語言的結構。
|
|
{|
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
另一種標記方式
想要排列得更像表格,可以使用wiki標示語言||將儲存格分開但又並排於同一行。這個方法對於儲存格要放入比較長的文字內容,如段落時,其長短的調整並不佳。它最適合用在簡短的內容,例如此處所作的表格例子。
你也可以在儲存格之間的wiki標示語言加入額外的空格,如同下面我對wiki標示語言所作的,可以使得wiki標示語言本身排列的更好看但又不影響表格的產生。
HTML屬性可以被加入本頁的表格示例。但是為了簡化,在下述的例子中並沒有寫出來。
|
|
{|
|橘子||蘋果||更多
|-
|麵包||餅||更多
|-
|奶油||冰淇凌||以及更多
|}
|
搭配HTML屬性
你可以加上HTML屬性讓你的表格看起來更漂亮
border="1"
|
|
{| border="1"
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
align="center" border="1"
|
|
{| align="center" border="1"
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
align="right" border="1"
你可以將屬性加諸於個別的儲存格。例如數字靠右對齊會比較好看
| 橘子
| 蘋果
| 12333.00
|
| 麵包
| 餅
| 500.00
|
| 奶油
| 冰淇凌
| 1.00
|
|
{| border="1"
|橘子
|蘋果
|align="right"|12333.00
|-
|麵包
|餅
|align="right"|500.00
|-
|奶油
|冰淇凌
|align="right"|1.00
|}
|
你也可以將屬性加諸於個別的行。
| 橘子
| 蘋果
| 12,333.00
|
| 麵包
| 餅
| 500.00
|
| 奶油
| 冰淇凌
| 1.00
|
|
{| border="1"
|橘子
|蘋果
|align="right"|12,333.00
|-
|麵包
|餅
|align="right"|500.00
|- style="font-style:italic;color:green;"
|奶油
|冰淇凌
|align="right"|1.00
|}
|
cellspacing="0" border="1"
|
|
{| cellspacing="0" border="1"
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
cellpadding="20" cellspacing="0" border="1"
|
|
{| cellpadding="20" cellspacing="0" border="1"
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
搭配HTML屬性與CSS樣式
CSS樣式屬性可以同時搭配或不搭配其他HTML屬性
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|
|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
搭配TH表頭的表格
TH (HTML表頭的表格)可以使用!而非|來指明。依照預設,表頭通常是粗體字與置中對齊。
表頭
各欄
|
|
{| border="1" cellpadding="20" cellspacing="0"
!好吃
!更好吃
|-
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
Colspan="2"
|
|
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|好吃的東西
|-
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
側表頭
預設
| 水果
| 橘子
| 蘋果
|
| 主食
| 麵包
| 餅
|
| 甜點
| 奶油
| 冰淇凌
|
|
{| border="1" cellpadding="20" cellspacing="0"
!水果
|橘子
|蘋果
|-
!主食
|麵包
|餅
|-
!甜點
|奶油
|冰淇凌
|}
|
靠右對齊
如下作出靠右對齊的效果
| 水果
| 橘子
| 蘋果
|
| 主食
| 麵包
| 餅
|
| 甜點
| 奶油
| 冰淇凌
|
|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |水果
|橘子
|蘋果
|-
!align="right" |主食
|麵包
|餅
|-
!align="right" |甜點
|奶油
|冰淇凌
|}
|
標題
標題可以如下的方式加到任何表格的第一行
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+食品和配餐
|-
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
屬性也可以如下的方式放到標題內
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''食品和配餐''
|-
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
表格搭配H1, H2, H3等標題
你可以使用==等於==號來製作HTML H1, H2, H3, H4等類型的標題,必須緊靠成行才有效果。
預覽整個表格如果你在表格之內的標題選取編輯標籤編輯,預覽,其母表格會因部份會斷落而無法完整的顯示出來。
保持標題架構與頁面的其他部份一致來使得頁面上方的目錄能正確的顯示。
|
|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===最好吃的===
|-
|橘子
|蘋果
|-
|麵包
|餅
|-
|奶油
|冰淇凌
|}
|
注意事項
負數
如果你要在一行的第一個單元格中顯示負數(例如|-6 ),其中的負號可能會導致顯示不正常。因為MediaWiki軟件會認為你的標記並不是新單元格,而是新行(|-)。
避免的方法是在負號前加空格(| -6)或者使用單行單元格標記(||-6)。