Help:表格

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Help:Tables and the translation is 94% complete.

Outdated translations are marked like this.
Other languages:
العربية • ‎català • ‎Deutsch • ‎Zazaki • ‎English • ‎Esperanto • ‎español • ‎فارسی • ‎suomi • ‎français • ‎Հայերեն • ‎Bahasa Indonesia • ‎italiano • ‎日本語 • ‎한국어 • ‎polski • ‎português • ‎português do Brasil • ‎română • ‎русский • ‎slovenčina • ‎тоҷикӣ • ‎Türkçe • ‎Tiếng Việt • ‎中文
PD 注意:当您编辑本页面时,即代表同意以CC0协议授权您的贡献。您可以在公有领域帮助页面找到更多信息。
PD
关于MediaWiki的数据库表结构,请参见手册:数据库布局Manual:Database layout

表格可以在維基頁面中被創建。 經驗上,除非必要,應盡量避免使用表格。 表格的標示語言通常複雜化了頁面的編輯。[1]

Wiki 標示語言一覽[edit]

{| 表格 起始
|+ 表格 標題, 選用; 每張表格只能出現一次且介於表格起始與第一行
|- 表格行, 第一行選用 -- wiki 引擎會假設是第一行
! 表格標題 儲存格, 選用。 可以使用(!!)在同一行加入接續的表格標題或是單獨使用(!)換新的一行 。
| 表格資料 儲存格, 必要! 可以使用(||)接續表格資料儲存格或是單獨使用(|)。
|} 表格結束
  • 上述符號必須出現在新行的開頭除了當在同一行中想要延續儲存格所增用的雙 || 與 !! 。
  • 'XHTML 屬性' 每一個符號,除了表格的末尾,可選擇性的接受一或多個 XHTML 屬性。 屬性必須與符號在同一行。 請使用一個空格隔開每一項屬性。
    • 儲存格與標題 (| 或是 ||,! 或是 !!,以及 |+) 持有表格內容。 所以要使用單線(|)來區隔屬性與內容。 儲存格內容可以都位在同一行或是換到另一行。
    • 表格與行的符號({| 與 |-) 並不直接持有內容。

在它們的屬性之後請不要加入管線(|)。 如果你在表格與行符號的屬性之後錯誤的加入管線符號,剖析器會將之刪除 以及之後任何觸及該出錯管線的屬性!

  • 內容 (a) 可以任何選用的 XHTML 屬性之後跟著同一行它的儲存格標記或是 (b) 儲存格標記的下一行。 使用 wiki 標示語言的內容本身需要自新的一行開始,例如清單,表頭,或是表格內接的表格,必須在它自個兒的新行。
    • 管道符号作为内容。 在表格中插入(|),可以使用<code>|</code>避免成为标示语言的一部分。

簡單的表格[edit]

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

您输入的 您输出的
{|
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包
奶油 冰淇凌

想要排列得更像表格,可以使用 wiki 標示語言 || 將儲存格分開但又並排於同一行。 如果单元格中的文本包含了换行符,可使用<br />替代。

您输入的 输出效果
{|
|橘子||苹果||更多
|-
|面包||饼||更多
|-
|奶油||冰淇淋||和更多
|}
橘子 苹果 更多
面包 更多
奶油 冰淇淋 和更多

如下面的Wiki标示语言,单元格包含额外空格,这不影响实际表格的呈现。

您输入的 您输出的
{|
|  橘子 || 苹果 || 更多
|-
|   面包 || 饼 || 更多
|-
|   奶油 || 冰淇凌 || 以及更多
|}
橘子 苹果 更多
面包 更多
奶油 冰淇凌 以及更多

您当然也可以在单元格中输入更长的文本或者更复杂的Wiki语法:

您输入的 您输出的
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

表格头部[edit]

表格的头部可以通过使用“!”(感叹号)替代“|”(管道符号)创建。 Headers usually show up bold and centered by default.

您输入的 您输出的
{|
! style="text-align:left;"| 项
! 金額數量
! 价钱
|-
|橘子
|10
|7.00
|-
|面包
|4
|3.00
|-
|奶油
|1
|5.00
|-
!总计
|
|15.00
|}
金額數量 價錢
橘子 10 7.00
面包 4 3.00
奶油 1 5.00
总计 15.00

Note: When using attributes as in the heading 'Item' a vertical bar '|' is used for separation. 而不是感叹号“!”。

說明[edit]

表格标题可以添加到任何表的顶部,如下所示。

您输入的 您输出的
{|
|+食品和配餐
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
食品和配餐
橘子 苹果
面包
奶油 冰淇凌

class="wikitable"[edit]

通过添加 class="wikitable" ,可以使表格实现:浅灰色背景、可见边框、内边距、左对齐的基本样式。

您输入的 您输出的
{| class="wikitable"
|+食品和配餐
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
食品和配餐
橘子 苹果
面包
奶油 冰淇凌

HTML 合并单元格[edit]

您可以在单元格可以使用HTML colspanrowspan属性进行高级布局。

您输入的 您输出的
{| class="wikitable"
!colspan="6"|购物清单
|-
|rowspan="2"|麵包和奶油
|派
|小圆面包
|丹麥甜糕餅
|colspan="2"|羊角麵包
|-
|奶酪
|colspan="2"|冰淇凌
|奶油
|酸奶酪
|}
購物清單
麵包和奶油 小圆面包 丹麥甜糕餅 羊角麵包
奶酪 冰淇凌 奶油 酸奶酪

XHTML 屬性[edit]

你可以添加XHTML屬性到表格。 For the authoritative source on these, see the W3C's HTML Specification page on tables.

添加属性到表格[edit]

将表格属性添加到“{|”后将应用属性到整个表格。

您输入的 您输出的
{| class="wikitable" style="text-align: center; color: green;"
|橘子
|苹果
|12,333.00
|-
|面包
|饼
|500.00
|-
|奶油
|冰淇凌
|1.00
|}
橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00

單元格属性[edit]

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

您输入的 您输出的
{| class="wikitable"
| 橘子
| 苹果
| style="text-align:right;" | 12,333.00
|-
| 面包
| 饼
| style="text-align:right;" | 500.00
|-
| 奶油
| 冰淇凌
| style="text-align:right;" | 1.00
|}
橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00

当您在单行中列出多个单元格时,也可以使用单元格属性。 注意单元格是被||分隔的,且每个单元格的属性和内容是被|分隔的。

您输入的 您输出的
{| class="wikitable"
| 橘子 || 苹果     || style="text-align:right;" | 12,333.00
|-
| 面包 || 饼       || style="text-align:right;" | 500.00
|-
| 奶油 || 冰淇凌 || style="text-align:right;" | 1.00
|}
橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00

行属性[edit]

你也可以將屬性加諸於個別的

您输入的 您输出的
{| class="wikitable"
| 橘子
| 苹果
| style="text-align:right;"| 12,333.00
|-
| 面包
| 饼
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| 奶油
| 冰淇凌
| style="text-align:right;"| 1.00
|}
橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00

添加简单的一像素表格边框[edit]

一个为表格添加一像素宽的边框的例子:

您输入的 您输出的
{| border="1" style="border-collapse:collapse"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包

单元格边框宽度[edit]

如果“border-width:”的值只有一个的话,值将应用于所有边框。

您输入的 您输出的
{|style="border-style: solid; border-width: 20px"
|
您好!
|}

您好!

如果“border-width:”多于一个值时,四个数字分别代表顶部,右侧,底部,左侧的宽度(请记住这个顺序)

您输入的 您输出的
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
您好!
|}

您好!

当少于四个值时,左部的值变为右部,底部的值变为顶部,右部的值变为顶部。

另一种定义单元格四边宽度的方法可以通过使用 "border-left"、"border-right"、"border-top"和"border-bottom":

您输入的 您输出的
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
您好!
|}

您好!

注意 注意:

  • The HTML attributes (such as "width=", "border=", "cellspacing=", "cellpadding=") do not need any length unit (the pixel unit is assumed). They are also invalid in HTML 5.

The CSS style properties (which override the HTML attributes) require an explicit length unit (if the value is not 0) such as "px" for the pixel.

搭配 HTML 屬性與 CSS 樣式[edit]

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

您输入的 您输出的
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包
奶油 冰淇凌

属性[edit]

属性可以添加到标题和标题行,如下所示。

您输入的 您输出的
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|''食品和配餐''
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
食品和配餐
橘子 苹果
面包
奶油 冰淇凌

列宽[edit]

列宽可以通过如下方式添加。

您输入的

{| style="color: black; background-color: #ffffcc; width: 85%;"
| colspan="2" | 此列列宽为屏幕宽度的85%,并带有背景色。
|-
| style="width: 30%; background-color: white;"|
'''此列列宽为屏幕宽度的85%中的30%。'''
| style="width: 70%; background-color: orange;"|
'''此列列宽为屏幕宽度的85%中的70%,并带有背景色。'''
|}

您输出的

此列列宽为屏幕宽度的85%,并带有背景色。
此列列宽为屏幕宽度的85%中的30%。 此列列宽为屏幕宽度的85%中的70%,并带有背景色。

表头单元格的辅助功能[edit]

Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column). When the table is rendered in a visual 2D environment, this is usually easy to infer.

However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:

您输入的 您输出的
{| class="wikitable"
|-
! scope="col"| 项目
! scope="col"| 数量
! scope="col"| 价格
|-
! scope="row"| 面包
| 0.3 kg
| $0.65
|-
! scope="row"| 奶油
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| 总计
| $1.90
|}
项目 数量 价格
面包 0.3 kg $0.65
奶油 0.125 kg $1.25
总计 $1.90

对齐[edit]

表格对齐[edit]

表格的对齐通过使用CSS实现。 表格对齐由外边距控制。 A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as auto. To have a table center aligned, you should set both margins to auto

一个右对齐表格的例子:

您输入的 您输出的
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| 橘子
| 苹果
|-
| 面包
| 饼
|-
| 奶油
| 冰淇凌 
|}
橘子 苹果
面包
奶油 冰淇凌

一个居中表格的例子:

您输入的 您输出的
{| class="wikitable" style="margin: auto;"
| 橘子
| 苹果
|-
| 面包
| 饼
|-
| 奶油
| 冰淇凌 
|}
橘子 苹果
面包
奶油 冰淇凌

文本环绕表格[edit]

如果您将表格与页面的右侧或左侧对齐,表格后面的文本将在表格结尾处开始,并在表格周围留下空白。 You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the float CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.

您输入的 您输出的
{| class="wikitable" style="float:right; margin-left: 10px;"
| 橘子
| 苹果
|-
| 面包
| 饼
|-
| 奶油
| 冰淇凌 
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.
橘子 苹果
面包
奶油 冰淇凌

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

单元格内容对齐[edit]

单元格内容的对齐受两个不同CSS的属性控制text-alignvertical-align控制。 text-align可以在表格、行或单个单元格中指定,而vertical-align只能在单个行或单元格中指定。

您输入的 您输出的
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

注意事项[edit]

负数[edit]

如果你要在一行的第一个单元格中显示负数(例如 |-6 ),其中的负号可能会导致显示不正常。因为MediaWiki软件会认为你的标记并不是新单元格,而是新行 (|-)。 避免的方法是在负号前加空格 (| -6) 或者使用单行单元格标记(||-6)。

CSS vs attributes[edit]

Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.

Common attributes for columns, column groups and row groups[edit]

The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element <col />), column groups (HTML element <colgroup></colgroup>) and row groups (HTML elements <thead></thead>, <tbody></tbody> and <tfoot></tfoot>). Those standard HTML elements are not accepted even in their HTML or XHTML syntax.

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element <tbody></tbody>) without any attributes or styles.

另请参阅[edit]

备注[edit]

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