Wikipedia:使用表格：修订间差异

来自Ubuntu中文
跳到导航跳到搜索
←上一编辑
Dbzhang800（留言 | 贡献）
1,886次编辑
小无编辑摘要
Dbzhang800（留言 | 贡献）
1,886次编辑
小无编辑摘要
 
（未显示同一用户的5个中间版本）
第1行： 第1行：
{{hh/zh}}
表格可以直接借助 HTML 的表格元件來製作，或是透過 wiki 格式語言在 wiki 網頁予以定義。 HTML 表格元件與相關的使用方式在各式的網頁都有詳細的說明於此不再贅述。 使用 wiki 格式語言，相較於 HTML 表格元件，的好處是當表格以字元符號架構出來的，使得你更容易的以文章編輯的角度看出表格的舖排樣子。
表格可以直接借助 HTML 的表格元件來製作，或是透過 wiki 格式語言在 wiki 網頁予以定義。 HTML 表格元件與相關的使用方式在各式的網頁都有詳細的說明於此不再贅述。 使用 wiki 格式語言，相較於 HTML 表格元件，的好處是當表格以字元符號架構出來的，使得你更容易的以文章編輯的角度看出表格的舖排樣子。


第83行： 第81行：
|}
|}


===搭配 HTML  屬性===
==搭配 HTML  屬性==
你可以加上 HTML 屬性讓你的表格看起來更漂亮
你可以加上 HTML 屬性讓你的表格看起來更漂亮
====border="1"====
 
*border="1"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第112行： 第112行：
</pre>
</pre>
|}
|}
====align="center" border="1"====
 
* align="center" border="1"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第140行： 第142行：
|}
|}


====align="right" border="1"====
* align="right" border="1"
 
你可以將屬性加諸於個別的'''儲存格'''。 例如數字靠右對齊會比較好看
你可以將屬性加諸於個別的'''儲存格'''。 例如數字靠右對齊會比較好看
{| width="100%"
{| width="100%"
第176行： 第179行：




你也可以將屬性加諸於個別的'''行'''。
* 你也可以將屬性加諸於個別的'''行'''
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第210行： 第214行：
|}
|}


====cellspacing="0" border="1"====
* cellspacing="0" border="1"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第237行： 第242行：
</pre>
</pre>
|}
|}
====cellpadding="20" cellspacing="0" border="1"====
 
* cellpadding="20" cellspacing="0" border="1"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第265行： 第272行：
|}
|}


===搭配 HTML 屬性與 CSS 樣式===
==搭配 HTML 屬性與 CSS 樣式==
CSS 樣式屬性可以同時搭配或不搭配其他 HTML 屬性
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"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第300行： 第309行：


===表頭===
===表頭===
====各欄====
 
* 各欄
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第333行： 第344行：
</pre>
</pre>
|}
|}
====Colspan="2"====
 
*Colspan="2"
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第366行： 第379行：


===側表頭===
===側表頭===
====預設====
 
*預設
 
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
第400行： 第415行：
|}
|}


====靠右對齊====
* 靠右對齊
 
如下作出靠右對齊的效果
如下作出靠右對齊的效果
{| width="100%"
{| width="100%"
第505行： 第521行：
你可以使用 ==等於== 符號來製作 HTML H1， H2， H3， H4 等類型的標題且'''必須緊靠成行'''才有效果。
你可以使用 ==等於== 符號來製作 HTML H1， H2， H3， H4 等類型的標題且'''必須緊靠成行'''才有效果。


'''預覽整個表格''' 如果你在表格，編輯，預覽''之內''的標題選取編輯標籤，其母表格會因部份會斷落而無法完整的顯示出來。If you click on an edit tab for a heading ''within'' a table， edit， and preview， the parent table will display erroneously broken because part of it will be missing。
'''預覽整個表格''' 如果你在表格，編輯，預覽''之內''的標題選取編輯標籤，其母表格會因部份會斷落而無法完整的顯示出來。


保持標題架構與頁面的其他部份一致使得頁面上方的目錄能正確的顯示。Keep the heading hierarchy consistant with the rest of the page so that the table of contents at page top works correctly。
保持標題架構與頁面的其他部份一致使得頁面上方的目錄能正確的顯示。


{| width="100%"
{| width="100%"
第541行： 第557行：
</pre>
</pre>
|}
|}
[[Category:Wikipedia]]

2008年4月18日 (五) 13:07的最新版本

表格可以直接借助 HTML 的表格元件來製作，或是透過 wiki 格式語言在 wiki 網頁予以定義。 HTML 表格元件與相關的使用方式在各式的網頁都有詳細的說明於此不再贅述。 使用 wiki 格式語言，相較於 HTML 表格元件，的好處是當表格以字元符號架構出來的，使得你更容易的以文章編輯的角度看出表格的舖排樣子。

經驗上，除非必要，應盡量避免使用表格。表格的標示語言通常複雜化了頁面的編輯。

Wiki 標示語言一覽

{| 表格 起始
|+ 表格 標題， 選用; 每張表格只能出現一次且介於表格起始與第一行
|- 表格行， 第一行選用 -- wiki 引擎會假設是第一行
! 表格標題 儲存格， 選用。 可以使用（!!）在同一行加入接續的表格標題或是單獨使用 (!）換新的一行 。
| 表格資料 儲存格， 必要! 可以使用（||）接續表格資料儲存格或是單獨使用 (|）。
|} 表格結束
  • 上述符號必須出現在新行的開頭除了當在同一行中想要延續儲存格所增用的雙 || 與 !! 。
  • XHTML 屬性。每一個符號，除了表格的末尾，可選擇性的接受一或多個 XHTML 屬性。 屬性必須與符號在同一行。請使用一個空格隔開每一項屬性。
    • 儲存格與標題 (| 或是 ||，! 或是 !!，以及 |+) 持有表格內容。 所以要使用單線(|)來區隔屬性與內容。儲存格內容可以都位在同一行或是換到另一行。
    • 表格與行的符號({| 與 |-) 並不直接持有內容。 在它們的屬性之後請不要加入管線(|)。 如果你在表格與行符號的屬性之後錯誤的加入管線符號，剖析器會將之刪除 以及之後任何觸及該出錯管線的屬性！
  • 內容 (a) 可以任何選用的 XHTML 屬性之後跟著同一行它的儲存格標記或是 (b) 儲存格標記的下一行。 使用 wiki 標示語言的內容本身需要自新的一行開始，例如清單，表頭，或是表格內接的表格，必須在它自個兒的新行。

簡單的表格

Plain

下面這個表格沒有外框與留白，但是顯示了最簡單的 wiki 表格標示語言的結構

Orange Apple
Bread Pie
Butter Ice cream 
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Alternative

想要排列得更像表格，可以使用 wiki 標示語言 || 將儲存格分開但又並排於同一行。 這個方法對於儲存格要放入比較長的文字內容，如段落時，其長短的調整並不佳。 它最適合用在簡短的內容，例如此處所作的表格例子。

你也可以在儲存格之間的 wiki 標示語言加入額外的空格，如同下面我對 wiki 標示語言所作的， 可以使得 wiki 標示語言本身排列的更好看但又不影響表格的產生。

HTML 屬性可以被加入這張表格 following the examples in other tables on this page 但是為了簡化，在下述的例子中並沒有寫出來。

Orange Apple more
Bread Pie more
Butter Ice cream and more 
{|
|  Orange    ||   Apple   ||   more
|-
|   Bread    ||   Pie     ||   more
|-
|   Butter   || Ice cream ||  and more
|}

搭配 HTML 屬性

你可以加上 HTML 屬性讓你的表格看起來更漂亮

  • border="1"
Orange Apple
Bread Pie
Butter Ice cream 
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
  • align="center" border="1"
Orange Apple
Bread Pie
Butter Ice cream 
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
  • align="right" border="1"

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

Orange Apple 12，333.00
Bread Pie 500.00
Butter Ice cream 1.00 
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}


  • 你也可以將屬性加諸於個別的行
Orange Apple 12，333.00
Bread Pie 500.00
Butter Ice cream 1.00 
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
  • cellspacing="0" border="1"
Orange Apple
Bread Pie
Butter Ice cream 
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
  • cellpadding="20" cellspacing="0" border="1"
Orange Apple
Bread Pie
Butter Ice cream 
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

搭配 HTML 屬性與 CSS 樣式

CSS 樣式屬性可以同時搭配或不搭配其他 HTML 屬性

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

Orange Apple
Bread Pie
Butter Ice cream 
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

搭配 TH 表頭的表格

TH (HTML 表頭的表格) 可以使用 ! 而非 | 來指明。 依照預設，表頭通常是粗體字與置中對齊。

表頭

  • 各欄
Yummy Yummier
Orange Apple
Bread Pie
Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
  • Colspan="2"
Yummies
Orange Apple
Bread Pie
Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

側表頭

  • 預設
Fruit Orange Apple
Dish Bread Pie
Complement Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream 
|}
  • 靠右對齊

如下作出靠右對齊的效果

Fruit Orange Apple
Dish Bread Pie
Complement Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream 
|}

標題

標題可以如下的方式加到任何表格的第一行

Food complements
Orange Apple
Bread Pie
Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

屬性也可以如下的方式放到標題內

Food complements
Orange Apple
Bread Pie
Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

表格搭配 H1， H2， H3 等表頭

你可以使用 ==等於== 符號來製作 HTML H1， H2， H3， H4 等類型的標題且必須緊靠成行才有效果。

預覽整個表格 如果你在表格，編輯，預覽之內的標題選取編輯標籤，其母表格會因部份會斷落而無法完整的顯示出來。

保持標題架構與頁面的其他部份一致使得頁面上方的目錄能正確的顯示。

Yummiest

Orange Apple
Bread Pie
Butter Ice cream 
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
取自“https://wiki.ubuntu.org.cn/index.php?title=Wikipedia:使用表格&oldid=78858”