帮助:Tables/zh

来自Ubuntu中文
跳到导航跳到搜索

表格可以直接借助 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"

你可以將屬性加諸於個別的儲存格。 例如數字靠右對齊會比較好看

橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00
{| border="1"
|橘子
|苹果
|align="right"|12,333.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)。