基础表格
PmWiki有两种表格标记语法。最简单的方式是直接使用聊天竖线来建立表格。令一种是高级表格,它可以创建复杂的表格。更多内容详见: Cookbook:Rowspan in simple tables 和Cookbook:Formatting tables。
Tables are created via use of double pipe characters: ||
. Lines beginning with this markup denote rows in a table or a formatting line. Within table row 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
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 ||
| cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 |
|
表头使用一个感叹号(!)来表示。这里的表格标题不是标题,不能使用多个感叹号(!!!)。
Table headers
|| 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 |
|
A table can have a caption, indicated by ||!caption!||
. Any caption must appear prior to other rows of the table.
Table caption
|| border=1
||! A special table !||
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1 || cell 2 || cell 3 ||
| A special table
cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 3 |
|
Formatting cell contents
Cell contents may be aligned left, centered, or aligned right.
- To left-align contents, place the cell contents next to the leading
||
.
- To center contents, add a space before and after the cell contents.
- To right-align contents, place a space before the cell contents and leave the cell contents next to the trailing
||
.
Cell alignments
|| border=1 width=100%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
|
cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
|
Default cell alignments
|| border=1 width=100%
||!cell default||!cell left ||
||default-aligned||left-aligned ||
|
cell default | cell left |
default-aligned | left-aligned |
|
Note that header and detail cells have different default alignments.
To get a cell to span multiple columns, follow the cell with empty cells.
(At present there is no markup for spanning rows.)
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 |
|
Table attributes
Any line that begins with ||
but doesn't have a closing ||
sets the table attributes for any tables that follow. These attributes can control the size and position of the table, borders, background color, and cell spacing. (In fact these are just standard HTML attributes that are placed in the <table> tag.)
Use the width=
attribute to set a table's width, using either a percentage value, an absolute size, or *.
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 |
|
The border=
attribute sets the size of a table's borders.
Bordered table
|| border=10 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
| cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
|
Borderless table
|| border=0 width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
| cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
|
Use align=center
, align=left
, and align=right
to center, left, or right align a table. Note that align=left
and align=right
create a floating table, such that text wraps around the table.
Table alignment: center
|| border=1 align=center width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
Notice how text does not wrap with a table using "align=center".
|
cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
Notice how text does not wrap with a table using "align=center".
|
Table alignment: left
|| border=1 align=left width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
Notice how text wraps to the right of a table using "align=left".
|
cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
Notice how text wraps to the right of a table using "align=left".
|
Table alignment: right
|| border=1 align=right width=50%
||!cell 1 ||! cell 2 ||! cell 3||
||left-aligned || centered || right-aligned||
Notice how text wraps to the left of a table using "align=right".
|
cell 1 | cell 2 | cell 3 |
left-aligned | centered | right-aligned |
Notice how text wraps to the left of a table using "align=right".
|
Note: to get a table to align left (but not "float left") requires CSS, as in
||style="margin-left:0px;"
The bgcolor=
attribute sets the background color for a table. At present there is no way to specify the color of individual rows or cells in this type of table (but see Cookbook:FormattingTables).
|| border=1 align=center bgcolor=yellow width=70%
||!cell 1 ||! cell 2 ||! cell 3||
||left-align || center || right-align||
| cell 1 | cell 2 | cell 3 |
left-align | center | right-align |
|
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" 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.