Help:Table examples

From Appropedia
Jump to: navigation, search

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:

Examples[edit]

Simple example[edit]

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]

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"| ##.## 
|- 

Sortable table[edit]

Sortable tables can be created by using class="wikitable sortable". As shown in the following example:

{| class="wikitable sortable"
|-
! Run # 
! Temperature (°F) 
! Humidity (%)
|-
| 1 
| 78 
| 42
|-
| 2 
| 76 
| 55
|-
| 3 
| 74 
| 41
|}
that creates
Run # Temperature (°F) Humidity (%)
1 78 42
2 76 55
3 74 41

Color; scope of parameters[edit]

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]

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]

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]

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]

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]

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
| &nbsp;
| 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
Aprologo-old.png Aprologo-old.png

Two Appropedia logos

Floating table[edit]

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]

This shows one table (in blue) nested inside another table's cell2. Nested tables must start on a new line.

Wiki markup

{| border="1"
| &alpha;
| 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]

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 &nbsp; to fill an empty cell with dummy content.

Centering tables[edit]

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]

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]

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]

The following examples show how various color combinations can be used together in tables.

Layouts[edit]

Characters
Equipment
Storage & Shops

Darker headers[edit]

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]

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]

The following color palettes show many possibilities for color uses in tables.

Tool: HTML HSV RGB Color Converter

[edit]

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]

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]

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]

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]

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]