Table Notes

Help:Table
From Wikipedia, the free encyclopedia

Jump to navigationJump to search
For a basic introduction to tables, see Help:Table/Introduction to tables. For style
considerations, see Wikipedia:Manual of Style/Tables. For accessibility, see Wikipedia:Manual
of Style/Accessibility/Data tables tutorial.
This help page is a how-to guide.

Shortcut
It details processes or procedures of some aspect(s) of Wikipedia's
norms and practices. It is not one of Wikipedia's policies or
guidelines, as it has not been thoroughly vetted by the community.  H:TABLE
Wikitext
 Cheatsheet
 All Wikitext
 Magic links
 Visual files
 Sound files
 Tables
 Using templates
 Using HTML codes within Wikitext
 v
 t
 e
A table is an arrangement of columns and rows that organizes and positions data. Tables can
be created on Wikipedia pages using special wikitext syntax, and many different styles and
tricks can be used to customise them.
Tables can be used as formatting instrument, but consider using a multi column listinstead.
Contents
 1Using the toolbar

 2Basic table markup summary
o 2.1HTML attributes
 3Pipe syntax tutorial
o 3.1Rendering the pipe
 4Examples
o 4.1Simple straightforward tables
 4.1.1Minimalist table
 4.1.2Multiplication table
o 4.2Whole table operations
 4.2.1Captions and summaries
 4.2.2Width, height
 4.2.3Setting borders
 4.2.4Positioning
 4.2.5Side by side tables
 4.2.6Side by side tables and images
 4.2.7Floating table
 4.2.8Centering tables
 4.2.9Nested tables
 4.2.10Scrolling
o 4.3Color; scope of parameters
o 4.4Cell operations
 4.4.1Setting cell parameters
 4.4.2Vertical alignment in cells
 4.4.3Cell content indenting
o 4.5Row operations
 4.5.1Height
 4.5.2Border
 4.5.3Alignment
 4.5.4Indexing
o 4.6Column operations
 4.6.1Setting column widths
 4.6.2Nowrap
 4.6.3Tooltips
o 4.7More complex examples
 4.7.1Mélange
 4.7.2Floating images in the center
 4.7.3Combined use of COLSPAN and ROWSPAN
o 4.8Workarounds
 4.8.1Decimal point alignment
 4.8.2Non-rectangular tables
 4.8.3Centering tables
 5Classes
o 5.1Collapsible tables
 5.1.1Without a header row
 5.1.2Tables with captions
o 5.2Sortable tables
 5.2.1Numerical and year sorting problems
 5.2.2Sorting and collapsing
o 5.3mw-datatable
 6Cells spanning multiple rows or columns
 7Section link or map link to a row anchor
 8Row template
 9Conditional table row
 10Other table syntax
o 10.1Comparison of table syntax
 11Pipe syntax in terms of the HTML produced
o 11.1Tables
o 11.2Rows
o 11.3Cells
o 11.4Headers
o 11.5Captions
 12Table cell templates
 13Vertically oriented column headers
 14Wikitable as image gallery
o 14.1Shifting/centering
 15Indenting tables
 16Converting spreadsheets and database tables to wikitable format
 17Tables and the Visual Editor (VE)
o 17.1Insert blank row or column
o 17.2Move or delete columns and rows
o 17.3Copy column from one table to another
o 17.4Copy or delete multiple rows
o 17.5Copy table from web page to Visual Editor
o 17.6Sort table with free spreadsheet program and Visual Editor
o 17.7Copy table from PDF to Visual Editor
 18See also
o 18.1Wikimedia sister projects
 19Notes
 20External links
Using the toolbar[edit]
Vector toolbar – default
Monobook toolbar
To automatically insert a table, click or (Insert a table) on the edit toolbar. If "Insert a
table" is not on the toolbar follow these directions to add it.
The following text is inserted when Insert a table is clicked:
{| class="wikitable"
|-
! Header 1
! Header 2
! Header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
This code produces the following table:
Header 1 Header 2 Header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3
The sample text ("Header N" or "row N, cell N") is intended to be replaced with actual data.
Basic table markup summary[edit]

See also: Help:Basic table markup
{| Table start Required.
Optional.
|+
Table
caption Only between table start and first table row.
Optional.
|- Table row
Can be omitted before the first row.
Optional.
!
Table Consecutive table header cells may be added on same line separated by double marks ( !! ); or start on
header cell
lines, each with its own single mark ( ! ).
Optional.
Table data Consecutive table data cells may be added on same line separated by double marks ( || ) or start on new
|
cell each with its own single mark ( | ). This mark is also used to separate HTML attributes from cell and ca
contents.
|} Table end Required.
 The above marks must start on a new line, except the double marks ( || and !! ) for
optionally adding consecutive cells to a single line.
 Blank spaces at the beginning of a line are ignored.
 Content may either follow its cell mark on the same line (after any optional HTML
attributes); or on lines below the cell mark. Content that uses wiki markup that itself needs
to start on a new line, such as with lists, headings, or nested tables, must be on its own
new line.
 To insert a pipe character ( | ) into a table caption or cell, use

the <nowiki>|</nowiki> escaping markup.
HTML attributes[edit]
Each mark, except table end ( |} ), optionally accepts one or more HTML attributes. Attributes
must be on the same line as the mark.
 Cells and caption ( | or || , ! or !! , and |+ ) hold content. So separate any attributes

from content with a single pipe ( | ), with attributes preceding content.
 Table and row marks ( {| and |- ) do not directly hold content. Do not add a pipe ( | )
after any attributes.
Commonly included attributes in tables include: class , for
example class="wikitable" ; style , for CSS styling; scope , to indicate row or column
header cells; rowspan , to extend cells by more than one row; colspan , to extend cells by
more than one column; and border , for borders for non-wikitable tables.
Instead of using absolute px pixel sizing, prefer relative values

with % and em units. Content can automatically shrink to fit.
Pipe syntax tutorial[edit]

For an introduction to HTML and tables, see Help:Table/HTML and tables.
Although HTML table syntax also works, special wikicode can be used as a shortcut to create a
table. The vertical bar or "pipe" symbol ( | ) codes function exactly the same as HTML
table markup, so a knowledge of HTML table code helps understand pipe code. The shortcuts
are as follows:
 The entire table is encased with curly brackets and a vertical bar character (a pipe). So
use {| to begin a table, and |} to end it. Each one needs to be on its own line:
{|
table code goes here
|}
 An optional table caption is included with a line starting with a vertical bar and plus sign
" |+ " and the caption after it:
{|
|+ caption
table code goes here
|}
 To start a new table row, type a vertical bar and a hyphen on its own line: " |- ". The
codes for the cells in that row start on the next line.
{|
|+ The table's caption
|-
row code goes here
|-
next row code goes here
|}
 Type the codes for each table cell in the next row, starting with a bar:
{|
|-
| cell code goes here
|-
| next row cell code goes here
| next cell code goes here
|}
 Cells can be separated with either a new line and a single bar, a new line and a double
bar, or by a double bar " || " on the same line. All three produce the same output:
{|
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell A
|Cell B
|Cell C
|}
 A row of column headers is identified by using " ! scope="col" | " instead of " | ", and
using " !! scope="col" | " instead of " || ". Header cells typically render differently from
regular cells, depending on the browser. They are often rendered in a bold font and
centered. The scope="col" markup is not technically necessary in wikitables styled with
class markup: class="wikitable" and so on. However, it is easier for other editors to
understand the markup when it is present, and the Manual of Style recommends using
it because it directly associates header with corresponding cells, a boon to accessibility.
{|
! scope="col" | Column header 1
|-
| Cell 1 || Cell 2 || Cell 3
|-
| Cell A
| Cell B
| Cell C
|}
 The first cell of a row is identified as a row header by starting the line with " !
scope="row" | " instead of " | ", and starting subsequent data cells on a new line.
The scope="row" code, as with scope="col" , is not technically required in wikitables
styled with class markup like class="wikitable" , but it is recommended by the Manual
of Style for both accessibility and code readability reasons.
{|
|-
! scope="row" | Row header 1
| Cell 2 || Cell 3
|-
! scope="row" | Row header A
| Cell B
| Cell C
|}
 The final table displays like this:

The table's caption
Column header 1 Column header 2 Column header 3
Row header 1 Cell 2 Cell 3
Row header A Cell B Cell C
 Optional parameters can modify the display and styling of cells, rows, or the entire table.
The simplest way to add styling is to set the wikitable CSS class, which in
Wikipedia's external style sheet is defined to apply a gray color scheme and cell borders to
tables using it:
! Column header 1
! Column header 2
! Column header 3
|-
! Row header 1
| Cell 2 || Cell 3
|-
! Row header A
| Cell B
| Cell C
|}
Which produces this:
The table's caption
Column header 1 Column header 2 Column header 3

Row header 1 Cell 2 Cell 3
Row header A Cell B Cell C
The table parameters and cell parameters are the same as in HTML,
see http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE and Table (HTML).
However, the thead , tbody , tfoot , colgroup , and col elements are currently not
supported in MediaWiki, as of April 2017.
A table can be useful even if none of the cells have content. For example, the background
colors of cells can be changed with cell parameters, making the table into a diagram,
like meta:Template talk:Square 8x8 pentomino example. An "image" in the form of a table is
much more convenient to edit than an uploaded image.
Each row must have the same number of cells as the other rows, so that the number of
columns in the table remains consistent. For empty cells, use the non-breaking
space as content to ensure that the cells are displayed.
With colspan and rowspan cells can span several columns or rows; (See § Mélange,
below.)
Rendering the pipe[edit]
When cell content that contains a pipe character does not render correctly, simply add an
empty format for that cell. The second pipe character in a line of |cell code will not display;
it is reserved for adding a format. Wikicode between the first and second pipe is a format, but
since emptiness or an error there is ignored, it just disappears. When this happens add a
dummy format. (For a real format, see § HTML attributes, below.) Use a third pipe character to
render your first pipe character.
Rendering the first pipe when it is the third pipe in the cell code
Code Rendering
{| class="wikitable" P|i|p|e| e|l|l|2|

|-
|''formatting''|P|i|p|e|
P|i|p|e C|e|l|l|2|
|C|e|l|l|2|
|-
|''formatting''|P|i|p|e||''formatting''|C|e|l|l|2| P|i|p|e|s e|l|l|2|
|-
||P|i|p|e|s||C|e|l|l|2|
|}
The third and later pipe characters will render, but to display two adjacent pipe characters in a
cell, (instead of having them act as the first pipe at the start of a new cell), other pipe-rendering
options are needed. Instead of using a dummy format to render a pipe, you can render it
directly by 1) <nowiki>|</nowiki> (preferred) or 2) html: | or | . Each line of
cell code in the following table has one wikicode pipe.
Displaying adjacent pipes
Code Rendering
{| class="wikitable" |Pipes34:||
|-
|<nowiki>|</nowiki>Pipes34:<nowiki>||</nowiki>
|Pipes34:||
|-
||Pipes34:||
|}
Template {{!}} , because of the order in which things are parsed, is equivalent to typing in a
single | pipe character. The single <nowiki />| parser-tag does not apply here. See how
they do not escape the second pipe, as &#124 and <nowiki>|</nowiki> did above:
Common mechanisms that do not work in tables
Code Rendering
{| class="wikitable" Pipe3:|
|-
|<nowiki />|Pipe3:|
Pipe3:|
|-
|Pipe2:{{!}}Pipe3:{{!}}
|}
Examples[edit]
Simple straightforward tables[edit]
Minimalist table[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
|}
{|
|-
| A || B
|-
| C || D
|}
As it appears in a browser (note that there are no borders):

AB
CD
Multiplication table[edit]
Note that in this example class="wikitable" is used to style the table with Wikipedia's
external style sheet for tables. It adds borders, background shading, and bold header text.
Wiki markup:
{| class="wikitable" style="text-align: center; width: 200px; height:

200px;"
|+ Multiplication table
|-
! ×
! 1
! 2
! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
As it appears in a browser:
Multiplication table
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15
Whole table operations[edit]

Captions and summaries[edit]
Further information: Wikipedia:Manual of Style/Accessibility/Data tables tutorial § Proper table
captions and summaries
Explicit table captions are recommended for data tables as a best practice; the Wikipedia
Manual of Style considers them a high priority for accessibility reasons, as a caption is
explicitly associated with the table, unlike a normal wikitext heading or introductory sentence. A
caption is provided with the |+ markup, similar to a table row ( |- ), but it does not contain any
cells, and is not within the table border. Captions are always displayed, appearing as a title
centered (in most browsers), above the table. A caption can be styled (with inline, not block,
CSS), and may include wikilinks, reference citations, etc.
A summary provides an overview of the data of a table for text and audio browsers, and does
not normally display in graphical browsers. The summary (also a high Manual of Style priority
for tables) is a synopsis of content, and does not repeat the caption text; think of it as
analogous to an image's alt description. A summary is added with summary="Summary
text here." , on the same line as the {| that opened the table, along with any class= and
other parameters for the table as a whole. The summary= attribute is, however, obsolete in
HTML5.
Wiki markup example showing left-aligned caption with a source citation:
|+ style="text-align: left;" | Data reported for 2014–2015, by region<ref
name="Garcia 2005" />
|-
! scope="col" | Year !! scope="col" | Africa !! scope="col" | Americas !!
scope="col" | Asia & Pacific !! scope="col" | Europe
|-
! scope="row" | 2014
| 2,300 || 8,950 || ''9,325'' || 4,200
|-
! scope="row" | 2015
| 2,725 || ''9,200'' || 8,850 || 4,775
|}
Data reported for 2014–2015, by region[99]
Year Africa Americas Asia & Pacific Europe
2014 2,300 8,950 9,325 4,200
2015 2,725 9,200 8,850 4,775
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:
{| class="wikitable" style="width: 60%; height: 14em;"

|-
| Top-left-cell || Top-center-cell || Top-right-cell
|- style="height: 7em;"
| Middle-left-cell || style="width: 14em;" | Middle-center-cell ||
Middle-right-cell
|-
| Bottom-left-cell || Bottom-center-cell || Bottom-right-cell
|}
Top-left-cell Top-center-cell Top-right-cell
Middle-left-cell Middle-center-cell Middle-right-cell
Bottom-left-cell Bottom-center-cell Bottom-right-cell
Setting borders[edit]
Add a border around a table using the CSS property border: thickness style color; ,
for example border:3px dashed red . This example uses a solid (non-dashed) gray border
that is one pixel wide:
Wiki markup:
{| style="border-spacing: 2px; border: 1px solid darkgray;"

! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
| [[File:StarIconBronze.png|120px|Bronze star icon]]
| [[File:StarIconGold.png|120px|Gold star icon]]
| [[File:StarIconGreen.png|120px|Green star icon]]
|- style="text-align: center;"
| Bronze star || Gold star || Green star
|}
Left Center Right
Bronze star Gold star Green star
Note the bottom-row texts are centered by style="text-align: center;" while the star
images are not centered (i.e. left aligned).
As long as the File: specs omit the parameter |thumb they don't show the caption lines in
the table (only during mouse-over). The border color darkgray matches typical tables or
infoboxes in articles; however, it could be any color name (as in style="border: 1px
solid darkgreen;" ) or use a hex-color (such as: #DDCCBB ).
The same CSS can be used in a cell's format specifier (enclosed in | ... | ) to put a border
around each cell:
Wiki markup:
{| style="border-spacing: 2px; border: 1px solid darkgray;"

! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
| style="border: 1px solid blue;"|
[[File:StarIconBronze.png|120px|Bronze star icon]]
| style="border: 1px solid #777777;"|
[[File:StarIconGold.png|120px|Gold star icon]]
| style="border: 1px solid #22AA55;"|
[[File:StarIconGreen.png|120px|Green star icon]]
|Bronze star || Gold star || Green star
|}
Left Center Right

Bronze star Gold star Green star
Note only the image cells, here, have individual borders, not the text. The lower hex-colors
(such as: #616161 ) are closer to black. Typically, all borders in a table would be one specific
color.
If all cells have the same border color, the resulting double borders may not be wanted; add
the border-collapse: collapse; CSS property on the table opening tag to reduce them
to single ones ( cellspacing=... is obsolete).
Additionally, the W3C allows the use of the otherwise obsolete border= attribute on the table
root ( {| ) if its value is "1". This adds a one-pixel border, in the default color, to the table and
all of its cells at once:
{| border=1
|-
| A || B || C
|-
| D || E || F
|}
A B C
D E F
Using the border-collapse property to combine the double borders, as described above:
{| border=1 style="border-collapse: collapse;"

|-
| A || B || C
|-
| D || E || F
|}
ABC
DE F
Positioning[edit]
 You can position the entire table, the contents of a row, and the contents of a cell, but not
with a single parameter for all the contents of the table. See m:Template talk:Table demo.
Prior to April 2009, using float to position a table was discouraged; however, it no
longer always breaks page rendering at large font sizes. See a floated image, below,
under "Floating images in the center".
Side by side tables[edit]
 You can also place tables side by side by adding style="display: inline-
table;" to the opening of your table. The tables will wrap depending on screen width.
Narrow your browser window to see. For example:
{| class="wikitable" style="display: inline-table;"

|+Table 1
|-
! Name
! Color
|-
|Fred
|Orange
|-
|Bob
|Green
|-
|Lindy
|Yellow
|}
{| class="wikitable" style="display: inline-table;"
|+Table 2
|-
! Animal
! State
|-
|Racoon
|Maine
|-
|Whale
|Alaska
|-
|Manta Ray
|Florida
|}
Gets:
Table 1
Name Color
Fred Orange
Bob Green
Lindy Yellow
Table 2
Animal State
Racoon Maine
Whale Alaska
Manta Ray Florida
Side by side tables and images[edit]

You can add images to the mix by removing the display: inline-table; styling from
within the tables and putting the styling in between each item. Also add vertical-
align:top; to align every item to the top. The tables and images will wrap depending on
screen width. Narrow your browser window to see. For example:
Table 1
Name Color
Fred Orange
Bob Green
Lindy Yellow
New York City
Table 2
Animal State
Racoon Maine
Whale Alaska
Manta Ray Florida


Floating table[edit]
Two table classes floatleft and floatright (case sensitive) help floating the table and
adjusting table margins so that they do not stick to the text. floatleft floats the table to the
left and adjusts right margin. floatright does the opposite. Example:
This paragraph is before the table. The text in column 2 spans both rows
because of format specifier "rowspan=2" so there is no coding for "Col 2"
in the 2nd row, just Col 1 and Col 3.
{| class="wikitable floatright"
| Col 1, row 1
| rowspan="2" | Col 2, row 1 (and 2)
| Col 3, row 1
|-
| Col 1, row 2
| Col 3, row 2
|}
{| class="wikitable floatleft"
| Col 1, row 1
| rowspan="2" | Col 2, row 1 (and 2)
| Col 3, row 1
|-
| Col 1, row 2
| Col 3, row 2
|}
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse,
quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo
voluptas nulla pariatur?
This paragraph is before the table. The text in column 2 spans both rows because of format
specifier "rowspan=2" so there is no coding for "Col 2" in the 2nd row, just Col 1 and Col 3.
Col 1, row 1 Col 3, row 1

Col 2, row 1 (and 2)

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi
nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui
dolorem eum fugiat, quo voluptas nulla pariatur?
Note that although there are other ways to float a table, such
as style="float:left;" , style="float:right;" , the only parameters that allow you to
position the table under a floated multimedia object are floatleft and floatright . For
example:
Aligning the table with floatleft produces:

But aligning it with style="float:left;" produces:

Centering tables[edit]
Shortcut
 HELP:TABLECENTER
Centered tables can be achieved, but they don't "float"; that is to say, no text appears to either
side. The trick is
{| style="margin-left: auto; margin-right: auto; border: none;" [1]
Wiki markup:
Text before table...

{| class="wikitable" style="margin-left: auto; margin-right: auto;
border: none;"
|+ Cells left-aligned, table centered
|-
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after table
Text before table...
Cells left-aligned, table centered
Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
...text after table

Nested tables[edit]
Note: because they cause accessibility issues, nested tables should be avoided whenever
possible.
Seven 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. And 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 schematics, though as noted
above, this is deprecated. Nested tables must start on a new line.
Wiki markup
1 {| style="border: 1px solid black;"

2 | style="border: 1px solid black;" | α
3 | style="border: 1px solid black; text-align:center;" | cell2
4 {| style="border: 2px solid black; background: #ffffcc;" 
5 | style="border: 2px solid darkgray;" | NESTED
6 |-
7 | style="border: 2px solid darkgray;" | TABLE
8 |}
9 | style="border: 1px solid black; vertical-align: bottom;" | the
original table again
10 | style="border: 1px solid black; width:100px" |
11 {| style="border: 2px solid black; background: #ffffcc"
12 | style="border: 2px solid darkgray;" | A
13 |}
14 {| style="border: 2px solid black; background: #ffffcc"
15 | style="border: 2px solid darkgray;" | B
16 | style="border: 2px solid darkgray;" | B
17 |}
18 | style="border: 1px solid black; width: 50px" |
19 {| style="border: 2px solid black; background:#ffffcc; float:left"
20 | style="border: 2px solid darkgray;" | C
21 |}
22 {| style="border: 2px solid black; background:#ffffcc; float:right"
23 | style="border: 2px solid darkgray;" | D
24 |}
25 |}
t
h
e
cel o
l2 r
i
N g
E i
S n
T a A C
αE l
D t B B D
T a
A b
B l
L e
E a
g
a
i
n
Scrolling[edit]
The whole table can be placed within a scrolling list so that new table lines appear on the
screen as old table lines disappear. Although MOS:SCROLL disfavors scrolling tables in article
space because article content should be accessible on a variety of devices whereas a scrolling
table hides some text, a scrolling table may be used in other Wikipedia namespaces.
Wiki markup:
<div style="width: 75%; height: 10em; overflow: auto; border: 2px solid
red;">
|-
| abc || def || ghi
|- style="height: 100px;"
| jkl || style="width: 200px;" | mno || pqr
|-
| stu || vwx || yz
|}
</div>
abc def ghi
jkl mno pqr
stu vwx yz
Color; scope of parameters[edit]

See also: Wikipedia:Manual of Style/Tables, Wikipedia:Background color, list of colors, Web
colors, and Template:Coltit
Two ways of specifying color of text and background for a single cell are as follows:
Wiki markup:
{|
|-
| style="background: red; color: white;" | abc
| def
| style="background: red;"| <span style="color: white;"> ghi </span>
| jkl
|}
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. (Note that there is no easy way to specify a color for a whole column—each cell in the
column must be individually specified. Tools can make it easier.)
Wiki markup:
{| style="background: yellow; color: green;"

|-
| stu || style="background: silver;" | vwx || yz
|- style="background: red; color: white"
|-
|}
stu vwx yz
stu vwx yz
stu vwx yz
To make the table blend in with the background, use style="background:

none;" or style="background: transparent;" . (Warning: style="background:
inherit;" , does not work with some older browsers, including IE6, so ensure that the table
will be intelligible if the coloring preference fails.)
To force a cell to match one of the default colors of the class="wikitable" template,
use style="background: #f2f2f2;" for the darker header, and style="background:
#f9f9f9;" for the lighter body.
Cell operations[edit]
Setting cell parameters[edit]
At the start of a cell, add your parameter followed by a single pipe. For
example, style="width: 300px"| sets 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;"
|-
| style="background: red;"|cell1 || style="width: 300px; background:
blue;"|cell2
| style="background: green;"|cell3
|}
cell1 cell2 cell3
Vertical alignment in cells[edit]
By default, text is aligned to the vertical middle of the cell:
A longer piece of text. Lorem ipsum dolor sit

amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore
Row magna aliqua. Ut enim ad minim veniam, quis Short
header nostrud exercitation ullamco laboris nisi ut text
aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit
Excepteur sint occaecat cupidatat non proident,

sunt in culpa qui officia deserunt mollit anim id
Row est laborum. Short
header Imagine someone scrolling down the page, text
seeing the tops of "empty" columns, and
wondering why they're empty.
To align the text to the top of the cell, apply the style="vertical-align: top;" CSS to
the rows (unfortunately, it seems to be necessary to apply this individually to every single row).
The valign=... attribute is obsolete and should not be used.
Wiki markup:
{| class="wikitable" style="width: 400px;"

|- style="vertical-align: top;"
! scope="row" style="width: 10%;" | Row header
| style="width: 70%;" | A longer piece of text. Lorem ipsum...
| style="width: 20%;" | Short text
|- style="vertical-align: top;"
! scope="row" | Row header
| Excepteur sint occaecat...
| Short text
|}
Row A longer piece of text. Lorem ipsum dolor sit Short

header amet, consectetur adipisicing elit, sed do text
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
Row Excepteur sint occaecat cupidatat non proident, Short

header sunt in culpa qui officia deserunt mollit anim id text
est laborum.
Imagine someone scrolling down the page,
seeing the tops of "empty" columns, and
wondering why they're empty.
Cell content indenting[edit]

The contents of a cell can be indented using a CSS style of padding-left .
Wiki markup:
|-
| Cell content that is not indented || 1
|-
| style="padding-left: 2em;" | Indented content || 2
|}
Cell content that is not indented 1
Indented content 2
Row operations[edit]
Height[edit]
(See § Width, height, above.)
Border[edit]
(See § Setting borders, above.)
Alignment[edit]
(See § Positioning, above.)
Indexing[edit]
Main page: Template:Row indexer
Column operations[edit]
Setting column widths[edit]
To force column widths to specific requirements, rather than accepting the width of the widest
text element in a column's cells, follow this example. Note that wrap-around of text is forced.
Wiki markup:
! scope="col" style="width: 50px;" | Name
! scope="col" style="width: 250px;" | Effect
! scope="col" style="width: 225px;" | 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.
Wiki markup:
|-
| style="width: 100pt;" | This column is 100 points wide
|-
| blah || blih || bluh
|}
This column is
This column is 200 points wide This column is 300 points wide
100 points wide
blah blih bluh
You can also use percentages, such as to equalize the widths of a two-column table by setting
one of them to style="width: 50%;" .
One application of setting the widths is aligning columns of consecutive tables. The following
are separate tables, with columns set to 350px and 225px. Warning: Setting specific pixel sizes
is deprecated, as it interferes with the ability of the browser to adjust content to suit the browser
window, device size, user-end font size limits, and other constraints. It is strongly preferred to
use relative sizes, in percentage or em values.
Country Capital
The Netherlands Amsterdam
Country Capital
France Paris
Nowrap[edit]
In a table that spans the entire width of a page, cells narrower than the widest cell tend to
wrap. To keep an entire column from wrapping, use style="white-space: nowrap;" in a
non-header cell on the longest/widest cell to affect the entire column.
Without nowrap , as it appears in a browser:
Episode Date Summary
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
"The Journey January
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
Begins" 1, 2010
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.
"When veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
January
Episodes commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
8, 2010
Attack" velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
laborum.
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
January
"So Long" commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
15, 2010
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
laborum.
With nowrap , on both the Episode and Date columns, as it appears in a browser:
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
"The Journey Begins" January 1, 2010 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.

"When Episodes Attack" January 8, 2010 ea commodo consequat. Duis aute irure dolor in

"So Long" January 15, 2010 ea commodo consequat. Duis aute irure dolor in
Tooltips[edit]
You can add tooltips to columns by using the {{H:title}} template. Simply replace the column-
title with {{H:title|The tool tip|Column title}} , which makes it appear like
so: Column title.
More complex examples[edit]
Mélange[edit]
Note: This example is not accessible, and should be avoided as much as possible. For
example, nested tables (tables inside tables) should be separated into distinct tables when
possible.
Here is a more advanced example, showing some more options available for making up tables.
Users can play with these settings in their own table to see what effect they have. Not all of
these techniques may be appropriate in all cases; just because colored backgrounds can be
added, for example, does not mean it is always a good idea. Try to keep the markup in tables
relatively simple—remember, other people are going to be editing the article too! This example
should give an idea of what is possible, though.
Wiki markup:
Text before centered table...

{| style="border: 1px solid black; border-spacing: 0; margin: 1em auto;"
|+ '''An example table'''
|-
! style="border: 1px solid black; padding: 5px; background: #efefef;" |
First header
! colspan="2" style="border: 1px solid black; padding: 5px; background:
#ffdead;" | Second header
|-
| style="border: 1px solid black; padding: 5px;" | Upper left
| style="border: 1px solid black; padding: 5px;" | Upper middle
| rowspan="2" style="border: 1px solid black; border-bottom: 3px solid
grey; padding: 5px; vertical-align: top;" |
Right side
|-
| style="border: 1px solid black; border-bottom: 3px solid grey; padding:
5px;" | Lower left
| style="border: 1px solid black; border-bottom: 3px solid grey; padding:
5px;" | Lower middle
|-
| colspan="3" style="border: 1px solid black; text-align: center;" |
Text before a nested table...
{|
|+ ''A table in a table''
|-
| style="text-align: center; width: 150px;" | [[File:Wiki.png]]
| style="text-align: center; width: 150px;" | [[File:Wiki.png]]
|-
| colspan="2" style="text-align:center; border-top: 1px solid red; border-right: 1px solid red; border-bottom: 2px solid red; border-left: 1px solid red;" |
Two Wikipedia logos
|}
...text after a nested table
|}
...text after centered table
Text before centered table...
An example table
First header Second header
Right side
Upper left Upper middle
Lower left Lower middle
Text before a nested table...

A table in a table
Two Wikipedia logos
...text after a nested table

Table Notes

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Table Notes

Hochgeladen von

Copyright:

Verfügbare Formate

Help:Table

From Wikipedia, the free encyclopedia

This help page is a how-to guide.

 Using HTML codes within Wikitext

 1Using the toolbar

Using the toolbar[edit]

Vector toolbar – default

This code produces the following table:

Header 1 Header 2 Header 3

row 1, cell 1 row 1, cell 2 row 1, cell 3

row 2, cell 1 row 2, cell 2 row 2, cell 3

Basic table markup summary[edit]

{| Table start Required.

 Blank spaces at the beginning of a line are ignored.

 To insert a pipe character ( | ) into a table caption or cell, use

 Cells and caption ( | or || , ! or !! , and |+ ) hold content. So separate any attributes

Instead of using absolute px pixel sizing, prefer relative values

Pipe syntax tutorial[edit]

 The final table displays like this:

Which produces this:

The table's caption

Column header 1 Column header 2 Column header 3

Row header A Cell B Cell C

{| class="wikitable" P|i|p|e| e|l|l|2|

Displaying adjacent pipes

Common mechanisms that do not work in tables

As it appears in a browser (note that there are no borders):

{| class="wikitable" style="text-align: center; width: 200px; height:

Whole table operations[edit]

Data reported for 2014–2015, by region[99]

Year Africa Americas Asia & Pacific Europe

2014 2,300 8,950 9,325 4,200

2015 2,725 9,200 8,850 4,775

{| class="wikitable" style="width: 60%; height: 14em;"

Top-left-cell Top-center-cell Top-right-cell

Middle-left-cell Middle-center-cell Middle-right-cell

Bottom-left-cell Bottom-center-cell Bottom-right-cell

{| style="border-spacing: 2px; border: 1px solid darkgray;"

Left Center Right

Bronze star Gold star Green star

{| style="border-spacing: 2px; border: 1px solid darkgray;"

Left Center Right

{| border=1 style="border-collapse: collapse;"

{| class="wikitable" style="display: inline-table;"

Manta Ray Florida

Side by side tables and images[edit]

New York City

Manta Ray Florida

Col 1, row 1 Col 3, row 1

Col 1, row 1 Col 3, row 1

Col 1, row 1 Col 3, row 1

Col 1, row 1 Col 3, row 1

Text before table...

Cells left-aligned, table centered

Duis aute irure

dolor in reprehenderit in voluptate velit

esse cillum dolore eu fugiat nulla pariatur.

...text after table

1 {| style="border: 1px solid black;"

abc def ghi

jkl mno pqr

Color; scope of parameters[edit]

{| style="background: yellow; color: green;"