表格格式

基本表格

PmWiki 有兩種類型的表格; 在此頁面描述用於創建 簡單的 表格與大量的單元格, 而 table directive 適用於規模較大的表格. 對於更多的表格格式參照 Cookbook:Rowspan in simple tablesCookbook:Formatting tables

創建表格可使用的雙管字符: || 。表格行與行的格式與起始時一致。表格邊框是用來分隔單元格。下面的例子是添加了一個邊框作說明(默認是沒有邊框)。

第一行標記中包含命令的格式。只有 || 在起始

基本表格
|| border=1
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 ||
cell 1cell 2cell 3
cell 1cell 2

表頭可以作為表格第一行的字符,請注意,這些都是 表頭 ,不是 標題 ,所以它不會延伸到 !!, !!!, 等等

表頭
|| border=1
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||
cell 1cell 2cell 3
cell 1cell 2cell 3

一個表格可以有一個標題, 以 ||!表格 標題!||作表示,標題必須出現在表格行之前

表格 標題
|| border=1
||! 表格 標題 !||
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||
表格 標題
cell 1cell 2cell 3
cell 1cell 2cell 3

單元格格式

單元格的內容格式可以是左對齊,居中,右對齊

  • 左對齊, 將單元格內容緊貼開始的 ||
  • 居中, 將單元格內容後面添加一個空格。
  • 右對齊, 將空格置於單元格內容之前及緊貼 ||
單元格排列
|| border=1 width=100%
||!cell 1      ||! cell 2  ||!       cell 3||
||左對齊        ||      居中 ||         右對齊||
cell 1cell 2cell 3
左對齊居中右對齊
默認單元格排列
|| border=1 width=100%
||!cell default||!cell left ||
||default-aligned||left-aligned ||
cell defaultcell left
default-alignedleft-aligned

請注意,標題和單元格具有不同的默認對齊

要設定合併單元格,可設置一個空單元格。 (目前沒有標記的跨越行.)

Column spanning
|| border=1 width=100%
|| |||| right column ||
|| || middle column ||||
|| left column ||||||
|| left column || middle column || right column ||
 right column
 middle column
left column
left columnmiddle columnright column

表格屬性

任何開頭 || 並沒有結尾 ||,可設定 表格屬性。這些屬性可以控制表格的大小和位置,邊框,背景顏色和單元格間距。 (其實這只是標準的HTML屬性<table>設置)

使用 width= 屬性來設置表的寬度, 使用一個百分比值,確定的數值,或 *.

Table width
|| border=1 width=100% 
|| cell 1 || cell 2 || cell 3 ||
|| c1 || cellcellcellcell2 || cell 3 ||
cell 1cell 2cell 3
c1cellcellcellcell2cell 3

border= 屬性設置框線間距的大小

厚邊框表格
|| border=10 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
cell 1cell 2cell 3
左對齊居中右對齊
無邊框表格
|| border=0 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
cell 1cell 2cell 3
左對齊居中右對齊

使用 align=center, align=left, 或 align=right 設置中間,靠左,或靠右表格。注意使用 align=leftalign=right 創建 浮動表格 時,文字會環繞表格。

表格位置: 中間
|| border=1 align=center width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=center" 格式
cell 1cell 2cell 3
左對齊居中右對齊

注意本文字,使用 "align=center" 格式

表格位置: 靠左
|| border=1 align=left width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=left" 格式
cell 1cell 2cell 3
左對齊居中右對齊

注意本文字,使用 "align=left" 格式

表格位置: 靠右
|| border=1 align=right width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=right" 格式
cell 1cell 2cell 3
左對齊居中右對齊

注意本文字,使用 "align=right" 格式

注意: 要讓一個表左對齊 (而不是"浮動左") CSS 語法,

||style="margin-left:0px;"

bgcolor=屬性設置表格的底色。這種類型的表格還可以指定單個欄或單元格(參見 Cookbook:FormattingTables).

|| border=1 align=center bgcolor=yellow width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
cell 1cell 2cell 3
左對齊居中右對齊

How do I create a basic table?

Tables are created via use of the double pipe character: ||. Lines beginning with this markup denote rows in a table; within such lines the double-pipe is used to delimit cells. In the examples below a border is added for illustration (the default is no border).

Basic table
|| border=1 rules=rows frame=hsides
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 || cell 3 ||
cell 1cell 2cell 3
cell 1cell 2cell 3

How do I create cell headers?

Header cells can be created by placing ! as the first character of a cell. Note that these are table headers, not headings, so it doesn't extend to !!, !!!, etc.

Table headers
|| border=1 rules=cols frame=vsides
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||
cell 1cell 2cell 3
cell 1cell 2cell 3

How do I obtain a table with thin lines and more distance to the content?

"Thin lines" is tricky and browser dependent, but the following works for Firefox and IE (Nov. 2009):

Thin lines and cell padding
||border="1" bordercolordark="black" bordercolorlight="black" style="border-collapse:collapse" cellpadding="5" width=66%
||!Header || !Header|| '''Header'''||
||cells   || with   ||      padding||
||        ||        ||             ||
Header!HeaderHeader
cellswithpadding
   

How do I create an advanced table?

See table directives

My tables are by default centered. When I try to use '||align=left' they don't align left as expected.

Use ||style="margin-left:0px;" instead.

How can I specify the width of columns?

You can define the widths via custom styles, see Cookbook:FormattingTables and $TableCellAttrFmt. Add in config.php : $TableCellAttrFmt = 'class=col\$TableCellCount';

And add in pub/css/local.css :
table.column td.col1 { width: 120px; }
table.column td.col3 { width: 40px; }

How can I display a double pipe "||" in cell text using basic table markup?

Escape it with [=||=] to display || unchanged.

How to I apply styles to the elements of the table, like an ID to the table row, or a class/style to the TD?

See $WikiStyleApply.