Table[edit | edit source]
See Help:Tables for creating basic tables using the toolbar.
Some of the following examples were taken directly from the Example section of the MediaWiki help page on Editing Tables, and more examples are there.
If you want to create a table, the best approach is to find a similar table in this page, then copy/paste the example into your article, and experiment a little. Tables are somewhat cumbersome to edit, since they do not look much like the finished product, but simple tables are not too hard to make.
You may also be interested in this the following online converter:
- http://area23.brightbyte.de/csv2wp.php provides a copy and paste from excel, or enter a csv formatted document, converter to mediawiki tables.
Examples[edit | edit source]
Simple example[edit | edit source]
Both of these generate the same output. Choose a style based on the number of cells in each row and the total text inside each cell.
Wiki markup
{|
| A
| B
|-
| C
| D
|}
Or:
{|
| A || B
|-
| C || D
|}
What it looks like in your browser
A B C D
Cost Table[edit | edit source]
Here is an example of a Cost Table:
| Quantity | Material | Source | Cost ($) | Total ($) |
|---|---|---|---|---|
| 3 | Things | The Thing Store | 2.20 | 6.60 |
| 1 | Another thing - 3' x 2', Yellow | The OT Store | 240.00 | 240.00 |
| Total Cost | $246.60 | |||
The following is the code that made that cost table; you can copy and paste it to adapt it to your own:
{| class="wikitable sortable"
! Quantity !! Material !! Source !! Cost ($) !! Total ($)
|-
| 3 || Things || The Thing Store
|align="right"| 2.20
|align="right"| 6.60
|-
| 1 || Another thing - 3' x 2', Yellow|| The OT Store
|align="right"| 240.00
|align="right"| 240.00
|-class="sortbottom"
|colspan="4" align="right" | '''Total Cost'''
|align="right"| '''$246.60'''
|}
To insert a new line, just insert the following below a "|-":
| # || Description|| Location |align="right"| ##.## |align="right"| ##.## |-
Color, scope of parameters[edit | edit source]
Two ways of specifying color of text and background for a single cell are as follows. The first form is preferred:
Wiki markup
{|
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <font color="white"> ghi </font>
| jkl
|}
What it looks like in your browser
abc def ghi jkl
Like other parameters, colors can also be specified for a whole row or the whole table; parameters for a row override the value for the table, and those for a cell override those for a row:
Wiki markup
{| style="background:yellow; color:green"
|-
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}
What it looks like in your browser
abc def ghi jkl mno pqr stu vwx yz
To make the table blend in with the background, use style="background:none". (Warning: style="background:inherit", does not work with some browsers, including IE6!)
Width, height[edit | edit source]
The width and height of the whole table can be specified, as well as the height of a row. To specify the width of a column one can specify the width of an arbitrary cell in it. If the width is not specified for all columns, and/or the height is not specified for all rows, then there is some ambiguity, and the result depends on the browser.
Wiki markup
{| style="width:75%; height:200px" border="1"
|-
| abc || def || ghi
|- style="height:100px"
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}
What it looks like in your browser
abc def ghi jkl mno pqr stu vwx yz
Note that style="inline CSS" has no effect with some browsers. If compatibility is important, equivalent older constructs like width="75%" should work on more browsers.
Setting your column widths[edit | edit source]
If you wish to force column widths to your own requirements, rather than accepting the width of the widest text element in a column's cells, then follow this example. Note that wrap-around of text is forced.
{| 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
To set column widths in a table without headers, specify the width in the first cell for each column, like this:
{| 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
Vertical alignment[edit | edit source]
By default data in tables is vertically centrally aligned, which results in odd-looking layouts like this:
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.
To fix this, apply the valign="top" attribute to the rows (unfortunately it seems to be necessary to apply this individually to every single row). For example:
{| 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.
|-valign="top"
|'''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.
Positioning[edit | edit source]
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. Do not, under any circumstances, use "float" to position a table. It will break page rendering at large font sizes.
Mélange[edit | edit source]
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 markup
{| 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:Aprologo-final.png|150px]]
| align="center" width="150px" | [[Image:Aprologo-final.png|150px]]
|-
| 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 Appropedia logos
|}
|}
What it looks like in your browser
An example table First header Second header upper left right side
lower left lower middle
A table in a table 
Two Appropedia logos
Floating table[edit | edit source]
Wiki markup
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
|}
Note the floating table to the right.
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...
What it looks like in your browser
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 Note the floating table to the right.
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...
Nested tables[edit | edit source]
This shows one table (in blue) nested inside another table's cell2. Nested tables must start on a new line.
Wiki markup
{| border="1"
| α
| align="center" | cell2
{| border="2" style="background:#ABCDEF;" <!-- The nested table must be on a new line -->
| NESTED
|-
| TABLE
|}
| valign="bottom" | the original table again
|}
What it looks like in your browser
α cell2
NESTED TABLE the original table again
Combined use of COLSPAN and ROWSPAN[edit | edit source]
Wiki markup
{| 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
|}
What it looks like in your browser
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.
Centering tables[edit | edit source]
Centered tables can be achieved, but they will not "float"; that is to say, no text will appear to either side. The trick is {| style="margin: 1em auto 1em auto"
Wiki markup
{| class="wikitable" style="margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! Duis || aute || irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
What it looks like in your browser
Cells left-aligned, table centered Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Setting parameters[edit | edit source]
At the start of a cell, add your parameter followed by a single pipe. For example width="300"| will set that cell to a width of 300 pixels. To set more than one parameter, leave a space between each one.
Wiki markup
{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}
What it looks like in your browser
cell1 cell2 cell3
Decimal point alignment[edit | edit source]
A method to get columns of numbers aligned at the decimal point is as follows:
Wiki markup
{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}
What it looks like in your browser
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 markup
{|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
|}
|}
What it looks like in your browser
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
Table color styles[edit | edit source]
The following examples show how various color combinations can be used together in tables.
Layouts[edit | edit source]
|
Darker headers[edit | edit source]
| HSV Two-level and One-level header palettes (Darker) | ||||||
|---|---|---|---|---|---|---|
| Use for | 2-level border | Top header | 1-level border | Btm header, One header |
Background | |
| S / V | S40 / V75 | S40 / V85 | S15 / V75 | S15 / V95 | S4 / V100 | |
| Hue: 35 | #BF9F72 | #D8B482 | #BFB3A2 | #F2E3CD | #FFFAF4 | |
| Two-level top header | ||||||
| Two-level bottom header, One-level header | ||||||
| Background | ||||||
| Hue: 120 | #73BF73 | #82D982 | #A3BFA3 | #CEF2CE | #F5FFF5 | |
| Two-level top header | ||||||
| Two-level bottom header, One-level header | ||||||
| Background | ||||||
| Hue: 205 | #729FBF | #82B4D8 | #A2B3BF | #CDE3F2 | #F4FAFF | |
| Two-level top header | ||||||
| Two-level bottom header, One-level header | ||||||
| Background | ||||||
Lighter headers[edit | edit source]
| HSV Two-level and One-level header palettes (Lighter) | ||||||
|---|---|---|---|---|---|---|
| Use for | 2-level border | Top header, One header |
1-level border | Btm header, Accent |
Background | |
| S / V | S15 / V75 | S15 / V95 | S15 / V75 | S10 / V100 | S4 / V100 | |
| Hue: 35 | #BFB3A2 | #F2E3CD | #BFB3A2 | #FFF4E5 | #FFFAF4 | |
| Two-level top header, One-level header | ||||||
| Two-level bottom header, Accent | ||||||
| Background | ||||||
| Hue: 120 | #A3BFA3 | #CEF2CE | #A3BFA3 | #E6FFE6 | #F5FFF5 | |
| Two-level top header, One-level header | ||||||
| Two-level bottom header, Accent | ||||||
| Background | ||||||
| Hue: 205 | #A2B3BF | #CDE3F2 | #A2B3BF | #E5F4FF | #F4FAFF | |
| Two-level top header, One-level header | ||||||
| Two-level bottom header, Accent | ||||||
| Background | ||||||
Color palettes[edit | edit source]
The following color palettes show many possibilities for color uses in tables.
Tool: HTML HSV RGB Color Converter
Logo[edit | edit source]
| H120 S20 V70: #8EB28E |
|---|
| H205 S15 V95: #CDE3F2 |
| H0 S0 V10: #1A1A1A |
| H195 S0 V75: #BFBFBF |
| H0 S0 V95: #F2F2F2 |
| H0 S0 V98: #FAFAFA |
Main Page and Sidebar[edit | edit source]
| H118 S22 V70: #8CB28B |
|---|
| H120 S20 V100: #CCFFCC |
| H105 S10 V100: #EBFFE5 |
| H222 S22 V65: #818CA5 |
| H22 S22 V85: #DABBA9 |
| H51 S22 V85: #D9D2A9 |
Greens[edit | edit source]
| H105 S40 V75: #85BF72 |
|---|
| H105 S40 V85: #97D882 |
| H105 S40 V95: #A9F291 |
| H105 S15 V75: #A9BFA2 |
| H105 S15 V85: #C0D8B8 |
| H105 S15 V95: #D6F2CD |
| H105 S10 V100: #EBFFE5 |
| H105 S4 V100: #F7FFF4 |
| H115 S40 V75: #79BF72 |
|---|
| H115 S40 V85: #89D882 |
| H115 S40 V95: #99F291 |
| H115 S15 V75: #A4BFA2 |
| H115 S15 V85: #BAD8B8 |
| H115 S15 V95: #D0F2CD |
| H115 S10 V100: #E7FFE5 |
| H115 S4 V100: #F5FFF4 |
| H120 S40 V75: #73BF73 |
|---|
| H120 S40 V85: #82D982 |
| H120 S40 V95: #91F291 |
| H120 S15 V75: #A3BFA3 |
| H120 S15 V85: #B8D9B8 |
| H120 S15 V95: #CEF2CE |
| H120 S10 V100: #E6FFE6 |
| H120 S4 V100: #F5FFF5 |
Blues[edit | edit source]
| H195 S40 V75: #72ACBF |
|---|
| H195 S40 V85: #82C3D8 |
| H195 S40 V95: #91DAF2 |
| H195 S15 V75: #A2B8BF |
| H195 S15 V85: #B8D0D8 |
| H195 S15 V95: #CDE9F2 |
| H195 S10 V100: #E5F8FF |
| H195 S4 V100: #F4FCFF |
| H205 S40 V75: #729FBF |
|---|
| H205 S40 V85: #82B4D8 |
| H205 S40 V95: #91C9F2 |
| H205 S15 V75: #A2B3BF |
| H205 S15 V85: #B8CBD8 |
| H205 S15 V95: #CDE3F2 |
| H205 S10 V100: #E5F4FF |
| H205 S4 V100: #F4FAFF |
| H225 S40 V75: #7285BF |
|---|
| H225 S40 V85: #8297D8 |
| H225 S40 V95: #91A9F2 |
| H225 S15 V75: #A2A9BF |
| H225 S15 V85: #B8C0D8 |
| H225 S15 V95: #CDD6F2 |
| H225 S10 V100: #E5EBFF |
| H225 S4 V100: #F4F7FF |
Tans & Yellows[edit | edit source]
| H20 S40 V75: #BF8C72 |
|---|
| H20 S40 V85: #D89E82 |
| H20 S40 V95: #F2B191 |
| H20 S15 V75: #BFACA2 |
| H20 S15 V85: #D8C3B8 |
| H20 S15 V95: #F2DACD |
| H20 S10 V100: #FFEEE5 |
| H20 S4 V100: #FFF8F4 |
| H35 S40 V75: #BF9F72 |
|---|
| H35 S40 V85: #D8B482 |
| H35 S40 V95: #F2C991 |
| H35 S15 V75: #BFB3A2 |
| H35 S15 V85: #D8CBB8 |
| H35 S15 V95: #F2E3CD |
| H35 S10 V100: #FFF4E5 |
| H35 S4 V100: #FFFAF4 |
| H50 S40 V75: #BFB272 |
|---|
| H50 S40 V85: #D8CA82 |
| H50 S40 V95: #F2E291 |
| H50 S15 V75: #BFBAA2 |
| H50 S15 V85: #D8D3B8 |
| H50 S15 V95: #F2ECCD |
| H50 S10 V100: #FFFAE5 |
| H50 S4 V100: #FFFDF4 |
| H50 S40 V100: #FFEE99 |
|---|
| H60 S40 V100: #FFFF99 |
| H60 S10 V100: #FFFFE5 |
| H60 S4 V100: #FFFFF4 |
See also[edit | edit source]
- Template:Columns - Breaks list into specified number of columns
- Template:Multicol - Breaks list into columns where marked