Table Notes.docx

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

Shortcut



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.

|+

Table caption

|-

Table row

Optional. Only between table start and first table row. Optional. 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 cell

Consecutive table data cells may be added on same line separated by double marks ( || ) or start on new 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>| 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:

{| |+ The table's caption || 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:

{| |+ The table's caption |-

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

{| |+ The table's caption ! scope="col" | Column header 1 ! scope="col" | Column header 2 ! scope="col" | Column header 3 || 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.

{| |+ The table's caption ! scope="col" | Column header 1 ! scope="col" | Column header 2 ! scope="col" | Column header 3 |-

! 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 Cell 3 Row header 1 Cell 2 Cell C Row header A Cell B



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:

{| class="wikitable" |+ 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 |}

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

{| class="wikitable"

Rendering

P|i|p|e|

e|l|l|2|

P|i|p|e

C|e|l|l|2|

||''formatting''|P|i|p|e| |C|e|l|l|2| ||''formatting''|P|i|p|e||''formatting''|C|e|l|l|2| |||P|i|p|e|s||C|e|l|l|2| |}

P|i|p|e|s 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>| (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>|Pipes34:<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 | and <nowiki>| did above: Common mechanisms that do not work in tables

Code

{| class="wikitable"

Rendering

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: {| class="wikitable" |+ style="text-align: left;" | Data reported for 2014–2015, by region |! 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 |}

As it appears in a browser: 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 |}

As it appears in a browser: 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="text-align: center;" | 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]] |- style="text-align: center;" |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: inlinetable;" 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 verticalalign: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?

As it appears in a browser: 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)

Col 1, row 2

Col 3, row 2

Col 1, row 1

Col 3, row 1 Col 2, row 1 (and 2)

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? 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:

Col 1, row 1

Col 3, row 1 Col 2, row 1 (and 2)

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? But aligning it with style="float:left;" produces:

Col 1, row 1

Col 3, row 1 Col 2, row 1 (and 2)

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? 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

As it appears in a browser: Text before table... Cells left-aligned, table centered

Duis

dolor

aute

irure

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 |}

As it appears in a browser:

cel l2 N E S T αE D T A B L E

t h e o r i g i n a A l t B B a b l e a g a i n

C D

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:

{| class="wikitable" || abc || def || ghi |- style="height: 100px;" | jkl || style="width: 200px;" | mno || pqr || stu || vwx || yz |}

As it appears in a browser: 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 | jkl

|}

As it appears in a 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. (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 || style="background: silver;" | vwx || yz || stu || style="background: silver;" | vwx || yz |}

As it appears in a browser: 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 |}

As it appears in a browser: cell1 cell2

cell3

Vertical alignment in cells[edit] By default, text is aligned to the vertical middle of the cell:

Row header

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.

Short text

Row header

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.

Short text

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 header

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.

Short text

Row header

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.

Short text

Cell content indenting[edit] The contents of a cell can be indented using a CSS style of padding-left . Wiki markup: {| class="wikitable" || Cell content that is not indented || 1 || style="padding-left: 2em;" | Indented content || 2 |}

Cell content that is not indented 1

Indented content

Row operations[edit] Height[edit] (See § Width, height, above.) Border[edit] (See § Setting borders, above.) Alignment[edit]

2

(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: {| class="wikitable" ! 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

Poké Ball

Effect

Regular Poké Ball

Great Ball Better than a Poké Ball

Games found in

All versions

All versions

To set column widths in a table without headers, specify the width in the first cell for each column. Wiki markup: {| class="wikitable" || style="width: 100pt;" | This column is 100 points wide | style="width: 200pt;" | This column is 200 points wide | style="width: 300pt;" | This column is 300 points wide || blah || blih || bluh |}

This column is 100 points wide

This column is 200 points wide

This column is 300 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

The Netherlands

Capital

Amsterdam

Country

France

Capital

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

"The Journey January Begins" 1, 2010

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

Episode

"When Episodes Attack"

"So Long"

Date

Summary

January 8, 2010

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.

January 15, 2010

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.

With nowrap , on both the Episode and Date columns, as it appears in a browser: Episode

Date

Summary

January 1, 2010

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.

"When Episodes Attack" January 8, 2010

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.

"The Journey Begins"

Episode

"So Long"

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 January 15, 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.

Tooltips[edit] You can add tooltips to columns by using the {{H:title}} template. Simply replace the columntitle 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

As it appears in a browser: Text before centered table...

An example table

First header

Second header

Upper left

Upper middle

Lower left

Lower middle

Right side

Text before a nested table... A table in a table

Two Wikipedia logos ...text after a nested table