基本表格
PmWiki 有兩種類型的表格; 在此頁面描述用於創建 簡單的 表格與大量的單元格, 而 table directive 適用於規模較大的表格. 對於更多的表格格式參照 Cookbook:Rowspan in simple tables 及 Cookbook:Formatting tables。
創建表格可使用的雙管字符: ||
。表格行與行的格式與起始時一致。表格邊框是用來分隔單元格。下面的例子是添加了一個邊框作說明(默認是沒有邊框)。
第一行標記中包含命令的格式。只有 ||
在起始
基本表格
|| border=1
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 ||
| cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 |
|
表頭可以作為表格第一行的字符,請注意,這些都是 表頭 ,不是 標題 ,所以它不會延伸到 !!, !!!, 等等
表頭
|| border=1
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1 || cell 2 || cell 3 ||
| cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 3 |
|
一個表格可以有一個標題, 以 ||!表格 標題!||
作表示,標題必須出現在表格行之前
表格 標題
|| border=1
||! 表格 標題 !||
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1 || cell 2 || cell 3 ||
| 表格 標題
cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 3 |
|
單元格格式
單元格的內容格式可以是左對齊,居中,右對齊
- 左對齊, 將單元格內容緊貼開始的
||
。
- 居中, 將單元格內容後面添加一個空格。
- 右對齊, 將空格置於單元格內容之前及緊貼
||
。
單元格排列
|| border=1 width=100%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
|
cell 1 | cell 2 | cell 3 |
左對齊 | 居中 | 右對齊 |
|
默認單元格排列
|| border=1 width=100%
||!cell default||!cell left ||
||default-aligned||left-aligned ||
|
cell default | cell left |
default-aligned | left-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 column | middle column | right column |
|
表格屬性
任何開頭 ||
並沒有結尾 ||
,可設定 表格屬性。這些屬性可以控制表格的大小和位置,邊框,背景顏色和單元格間距。 (其實這只是標準的HTML屬性<table>設置)
使用 width=
屬性來設置表的寬度, 使用一個百分比值,確定的數值,或 *.
Table width
|| border=1 width=100%
|| cell 1 || cell 2 || cell 3 ||
|| c1 || cellcellcellcell2 || cell 3 ||
|
cell 1 | cell 2 | cell 3 |
c1 | cellcellcellcell2 | cell 3 |
|
border=
屬性設置框線間距的大小
厚邊框表格
|| border=10 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
| cell 1 | cell 2 | cell 3 |
左對齊 | 居中 | 右對齊 |
|
無邊框表格
|| border=0 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
| cell 1 | cell 2 | cell 3 |
左對齊 | 居中 | 右對齊 |
|
使用 align=center
, align=left
, 或 align=right
設置中間,靠左,或靠右表格。注意使用 align=left
或 align=right
創建 浮動表格 時,文字會環繞表格。
表格位置: 中間
|| border=1 align=center width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=center" 格式
|
cell 1 | cell 2 | cell 3 |
左對齊 | 居中 | 右對齊 |
注意本文字,使用 "align=center" 格式
|
表格位置: 靠左
|| border=1 align=left width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=left" 格式
|
cell 1 | cell 2 | cell 3 |
左對齊 | 居中 | 右對齊 |
注意本文字,使用 "align=left" 格式
|
表格位置: 靠右
|| border=1 align=right width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||左對齊 || 居中 || 右對齊||
注意本文字,使用 "align=right" 格式
|
cell 1 | cell 2 | cell 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 1 | cell 2 | cell 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 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 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 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 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 | !Header | Header |
cells | with | padding |
| | |
|
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.