表格
出自CiviWiki
本文翻譯自http://meta.wikimedia.org/wiki/Help:Table
目錄 |
範例
簡易範例
下列二種方法結果相同.
Wiki 語法
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
結果顯示
A B C D
乘 法 表
Wiki 語法
{| class="wikitable" style="text-align:center"
|+乘 法 表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
結果顯示
乘 法 表 × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
顏色及參數範圍
有二種設定單一儲存格文字及背景顏色的方法. 建議使用第一種方法:
Wiki 語法
{|
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <font color="white"> ghi </font>
| jkl
|}
結果顯示
abc def ghi jkl
整個表格或整列的顏色也可以被指定:
Wiki 語法
{| style="background:yellow; color:green"
|-
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}
結果顯示
abc def ghi jkl mno pqr stu vwx yz
要混合使用背景時, 可使用 style="background:none" 或 style="background:transparent"語法. (Warning: style="background:inherit"</code語法,在IE6等瀏覽器無法運作!)
寬度, 高度
整個表格的寬度,高度是可以被設定 , 同時每列的高度也可以設定. 任何一個儲存格的欄寬也可以設定.
Wiki 語法
{| style="width:75%; height:200px" border="1"
|-
| abc || def || ghi
|- style="height:100px"
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}
結果顯示
abc def ghi jkl mno pqr stu vwx yz
注意 <code>style="inline CSS" 在某些瀏覽器沒有效用. If compatibility is important, equivalent older constructs like width="75%" should work on more browsers.
設定欄寬
可依你的需求強制設定欄寬,範例如下:
{| border="1" cellpadding="2"
!width="50"|Name
!width="225"|Effect
!width="225"|Games Found In
|-
|Poké Ball || Regular Poké Ball || All Versions
|-
|Great Ball || Better than a Poké Ball || All Versions
|}
Name Effect Games Found In Poké Ball Regular Poké Ball All Versions Great Ball Better than a Poké Ball All Versions
表格中沒有欄位名稱欄時, 可在第一行的每一個儲存格設定各欄欄寬, 如下:
{| border="1" cellpadding="2"
|-
|width="100pt"|This column is 100 points wide
|width="200pt"|This column is 200 points wide
|width="300pt"|This column is 300 points wide
|-
|blah || blah || blah
|}
This column is 100 points wide This column is 200 points wide This column is 300 points wide blah blah blah
垂直對齊
預設的垂直對齊方式為置中對齊:
Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A shorter piece of text. Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A shorter piece of text.
設定向上對齊,可在每一列設定 valign="top" 屬性(每一列都須設定). 範例如下:
{| border="1" cellpadding="2"
|-valign="top"
|width="10%"|'''Row heading'''
|width="70%"|A longer piece of text. Lorem ipsum...
|width="20%"|A shorter piece of text.
|-
|'''Row heading'''
|A longer piece of text. Lorem ipsum...
|A shorter piece of text.
|}
Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A shorter piece of text. Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A shorter piece of text.
位置
One can position the table itself, and all contents in a row, and contents in a cell, but not with a single parameter for all contents in the table, see [Table demo]. Do not, under any circumstances, use "float" to position a table. It will break page rendering at large font sizes.
綜合範例
Here's a more advanced example, showing some more options available for making up tables. Note however that with colspan and rowspan sorting does not work properly anymore.
You can play with these settings in your own table to see what effect they have. Not all of these techniques may be appropriate in all cases; just because you can add colored backgrounds, for example, doesn't mean it's always a good idea. Try to keep the markup in your tables relatively simple -- remember, other people are going to be editing the article too! This example should give you an idea of what is possible, though.
Wiki 語法
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''An example table'''
|-
! style="background:#efefef;" | First header
! colspan="2" style="background:#ffdead;" | Second header
|-
| upper left
|
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | lower left
| style="border-bottom:3px solid grey;" | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
| align="center" width="150px" | [[Image:Twce.PNG]]
| align="center" width="150px" | [[Image:Twce.PNG]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px
solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Two Wikimedia logos
|}
|}
結果顯示
An example table First header Second header upper left right side
lower left lower middle
A table in a table 
兩個省土木公會標誌
Floating table(文繞表格)
Wiki 語法
This paragraph is before the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...
{| align="right" border="1"
| Col 1, row 1
|rowspan="2"| Col 2, row 1 (and 2)
| Col 3, row 1
|-
| Col 1, row 2
| Col 3, row 2
|}
注意:表格在文字右邊.
This paragraph is after the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...
結果顯示
This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...
Col 1, row 1 Col 2, row 1 (and 2) Col 3, row 1 Col 1, row 2 Col 3, row 2 注意:表格在文字右邊.
This paragraph is after the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...
儲存格內的表格(子表格)
Five different (blue) tables are shown nested inside the cells of a table. Automatically the two tables |A| and |B|B| are vertically aligned instead of the usual side by side of text characters in a cell. "float" is used to fix each of tables |C| and |D| to their own position within one cell of the table. This may be used for charts and schemes. 子表格必須從新的一行開始.
Wiki 語法
{| border="1"
| α
| align="center" | cell2
{| border="2" style="background:#ABCDEF;" <!-- 子表格必須從新的一行開始 -->
| 子表格
|-
| 子表格
|}
| valign="bottom" | the original table again
| style="width:100px;" |
{| border="2" style="background:#ABCDEF;;"
| A
|}
{| border="2" style="background:#ABCDEF;"
| B || B
|}
| style="width:50px;" |
{| border="2" style="background:#ABCDEF; float:left;"
| 左
|}
{| border="2" style="background:#ABCDEF; float:right;"
| 右
|}
|}
結果顯示
α cell2
子表格 子表格 the original table again
A
B B
左
右
合併儲存格 (Combined use of COLSPAN and ROWSPAN)
Wiki 語法
{| border="1" cellpadding="5" cellspacing="0"
|-
| Column 1 || Column 2 || Column 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by cell A -->
| D
|-
| E
| rowspan="2" colspan="2" align="center"| F
|-
| G <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" align="center"| H
|}
結果顯示
Column 1 Column 2 Column 3 A B C D E F G H
Note that using rowspan="2" for cell G combined with rowspan="3" for cell F to get another row below G and F won't work, because all (implicit) cells would be empty.
Likewise complete columns are not displayed if all their cells are empty. Borders between non-empty and empty cells might be also not displayed (depending on the browser), use to fill an empty cell with dummy content.
置中表格
置中表格可以被設定,但置中表格不是以"文繞表格"方式呈現; 也就是說,表格二側不會出現文字.密訣就是{| style="margin: 1em auto 1em auto"
Wiki 語法
{| class="wikitable" style="margin: 1em auto 1em auto" border="1"
|+ '''儲存格向左對齊 , 表格置中'''
! Duis || aute || irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
結果顯示
儲存格向左對齊 , 表格置中 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
參數設定
在每個儲存格開始| 字元後方直接加入參數設定. 例如 width="300" 將會設定儲存格寬度為 300 pixels. 欲設定更多參數則需在每參數中留一個空白.
Wiki 語法
{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}
結果顯示
cell1 cell2 cell3
小數點對齊
下列方法,利用欄位可使小數點對齊:
Wiki 語法
{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}
結果顯示
432 .1 43 .21 4 .321
If the column of numbers appears in a table with cell padding or cell spacing, one can still align the decimal points without an unsightly gap in the middle. Embed a table in each number's cell and specify its column widths. Make the embedded tables' column widths the same for each cell in the column. (If decimal points are still misaligned using this method, the main table's column may be too narrow. Add a parameter to increase the column's width.)
Wiki 語法
{|border="1" cellpadding="4" cellspacing="2"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}
結果顯示
432 .1
43 .21
4 .321
In simple cases one can dispense with the table feature and simply start the lines with a space, and put spaces to position the numbers:
432.1 43.21 4.321
