Wiki Page Table Formatting Assignment

Wiki Formatting

Links

OpenProject links

OpenProject allows hyperlinking between issues, changesets and wiki pages from anywhere wiki formatting is used.

  • #124 displays a link to an issue: (link is striked-through if the issue is closed)
  • ##124 displays a link to an issue with context information: #12 New: Issue subject 2012-05-14 - 2012-05-23 (User Name - assigned to)
  • ###124 displays a link to an issue with context information and an excerpt (first 3 lines) of the description
  • r758 displays a link to a changeset: r758
  • commit:c6f4d0fd displays a link to a changeset with a non-numeric hash: c6f4d0fd
  • sandbox:r758 displays a link to a changeset of another project: sandbox:r758
  • sandbox:c6f4d0fd displays a link to a changeset with a non-numeric hash: sandbox:c6f4d0fd

Wiki links:

  • [[Guide]] displays a link to the page named 'Guide': Guide
  • [[Guide#further-reading]] takes you to the anchor "further-reading". Headings get automatically assigned anchors so that you can refer to them: Guide
  • [[Guide|User manual]] displays a link to the same page but with a different text: User manual

You can also link to pages of an other project wiki:

  • [[sandbox:some page]] displays a link to the page named 'Some page' of the Sandbox wiki
  • [[sandbox:]] displays a link to the Sandbox wiki main page

Wiki links are displayed in red if the page doesn't exist yet, eg: Nonexistent page.

Links to other resources:

  • Documents:
    • document#17 (link to document with id 17)
    • document:Greetings (link to the document with title "Greetings")
    • document:"Some document" (double quotes can be used when document title contains spaces)
    • sandbox:document:"Some document" (link to a document with title "Some document" in other project "sandbox")
  • Versions:
    • version#3 (link to version with id 3)
    • version:1.0.0 (link to version named "1.0.0")
    • version:"1.0 beta 2"
    • sandbox:version:1.0.0 (link to version "1.0.0" in the project "sandbox")
  • Attachments:
    • attachment:file.zip (link to the attachment of the current object named file.zip)
    • For now, attachments of the current object can be referenced only (if you're on an issue, it's possible to reference attachments of this issue only)
  • Repository files:
    • source:some/file (link to the file located at /some/file in the project's repository)
    • source:some/file@52 (link to the file's revision 52)
    • source:some/file#L120 (link to line 120 of the file)
    • source:some/file@52#L120 (link to line 120 of the file's revision 52)
    • source:"some file@52#L120" (use double quotes when the URL contains spaces
    • export:some/file (force the download of the file)
    • sandbox:source:some/file (link to the file located at /some/file in the repository of the project "sandbox")
    • sandbox:export:some/file (force the download of the file)
  • Forum messages:
    • message#1218 (link to message with id 1218)
  • Projects:
    • project#3 (link to project with id 3)
    • project:someproject (link to project named "someproject")

Escaping:

  • You can prevent OpenProject links from being parsed by preceding them with an exclamation mark: !

External links

HTTP URLs and email addresses are automatically turned into clickable links:

https://www.openproject.org, someone@foo.bar

displays: https://www.openproject.org, someone@foo.bar

If you want to display a specific text instead of the URL, you can use the standard textile syntax:

"OpenProject web site":https://www.openproject.org

displays: OpenProject web site

Text formatting

For things such as headlines, bold, tables, lists, OpenProject supports Textile syntax. See http://www.textism.com/tools/textile/ for information on using any of these features. A few samples are included below, but the engine is capable of much more of that.

Font style

* *bold* * _italic_ * _*bold italic*_ * +underline+ * -strike-through-

Display:

  • bold
  • italic
  • *bold italic*

Inline images

  • !image_url! displays an image located at image_url (textile syntax)
  • !>image_url! right floating image
  • If you have an image attached to your wiki page, it can be displayed inline using its filename: !attached_image.png!

Headings

h1. Heading h2. Subheading h3. Subsubheading

OpenProject assigns an anchor to each of those headings thus you can link to them with "#Heading", "#Subheading" and so forth.

Paragraphs

p>. right aligned p=. centered

This is a centered paragraph.

Blockquotes

Start the paragraph with bq.

bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern. To go live, all you need to add is a database and a web server.

Display:

Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
To go live, all you need to add is a database and a web server.

Table of content

{{toc}} => left aligned toc {{>toc}} => right aligned toc

Macros

OpenProject has the following builtin macros:

Sample macro.

Include a wiki page. Example:

Displays a list of all available macros, including description if available.

Code highlighting

Code highlightment relies on CodeRay, a fast syntax highlighting library written completely in Ruby. It currently supports c, cpp, css, delphi, groovy, html, java, javascript, json, php, python, rhtml, ruby, scheme, sql, xml and yaml languages.

You can highlight code in your wiki page using this syntax:

<pre><code class="ruby"> Place you code here. </code></pre>

Example:

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.

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

Using the toolbar[edit]

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 1Header 2Header 3
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 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

Optional.

Only between table start and first table row.

|-

Table row

Optional.

Can be omitted before the first row and/or after the last row.

!

Table header cell

Optional.

Consecutive table header cells may be added on same line separated by double marks (); or start on new lines, each with its own single mark ().

|

Table data cell

Optional.

Consecutive table data cells may be added on same line separated by double marks () or start on new lines, each with its own single mark (). This mark is also used to separate HTML attributes from cell and caption 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 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: , for example ; , for CSS styling; , to indicate row or column header cells; , to extend cells by more than one row; , to extend cells by more than one column; and , for borders for non-wikitable tables.

Instead of using absolute pixel sizing, prefer relative values with and 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:
{| |+ captiontable 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 "" instead of "", and using "" 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 markup is not technically necessary in wikitables styled with class markup: 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 "" instead of "", and starting subsequent data cells on a new line. The code, as with , is not technically required in wikitables styled with class markup like , 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:
Column header 1Column header 2Column header 3
Row header 1Cell 2Cell 3
Row header ACell BCell 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 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:

Column header 1Column header 2Column header 3
Row header 1Cell 2Cell 3
Row header ACell BCell 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 , , , , and elements are currently not supported in MediaWiki, as of April 2017[update].

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

CodeRendering
{| class="wikitable" |- |''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|e|l|l|2|
P|i|p|eC|e|l|l|2|
P|i|p|e|se|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) (preferred) or 2) html: or . Each line of cell code in the following table has one wikicode pipe.

CodeRendering
{| class="wikitable" |- |<nowiki>|</nowiki>Pipes34:<nowiki>||</nowiki> |- |&#124;Pipes34:&#124;&#x7C; |}

Template , because of the order in which things are parsed, is equivalent to typing in a single | pipe character. The single parser-tag does not apply here. See how they do not escape the second pipe, as &#124 and did above:

CodeRendering
{| class="wikitable" |- |<nowiki />|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):

Multiplication table[edit]

Note that in this example 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:

×123
1123
2246
3369
44812
551015

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 description. A summary is added with , on the same line as the that opened the table, along with any and other parameters for the table as a whole. The 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<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 |}

As it appears in a browser:

YearAfricaAmericasAsia & PacificEurope
20142,3008,9509,3254,200
20152,7259,2008,8504,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-cellTop-center-cellTop-right-cell
Middle-left-cellMiddle-center-cellMiddle-right-cell
Bottom-left-cellBottom-center-cellBottom-right-cell

Setting borders[edit]

Add a border around a table using the CSS property , for example . 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 |}
LeftCenterRight
Bronze starGold starGreen star

Note the bottom-row texts are centered by while the star images are not centered (i.e. left aligned).

As long as the specs omit the parameter they don't show the caption lines in the table (only during mouse-over). The border color matches typical tables or infoboxes in articles; however, it could be any color name (as in ) or use a hex-color (such as: ).

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;"|<!--greenish border--> [[File:StarIconGreen.png|120px|Green star icon]] |- style="text-align: center;" |Bronze star || Gold star || Green star |}
LeftCenterRight

Bronze starGold starGreen star

Note only the image cells, here, have individual borders, not the text. The lower hex-colors (such as: ) 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 CSS property on the table opening tag to reduce them to single ones ( is obsolete).

Additionally, the W3Callows the use of the otherwise obsolete 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 |}

Using the property to combine the double borders, as described above:

{| border="1" style="border-collapse: collapse;" |- | A || B || C |- | D || E || 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 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".

Floating table[edit]

Two table classes and (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. floats the table to the left and adjusts right margin. 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 1Col 2, row 1 (and 2)Col 3, row 1
Col 1, row 2Col 3, row 2
Col 1, row 1Col 2, row 1 (and 2)Col 3, row 1
Col 1, row 2Col 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 , , the only parameters that allow you to position the table under a floated multimedia object are and . For example:

Aligning the table with produces:

Col 1, row 1Col 2, row 1 (and 2)Col 3, row 1
Col 1, row 2Col 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 produces:

Col 1, row 1Col 2, row 1 (and 2)Col 3, row 1
Col 1, row 2Col 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]

Centered tables can be achieved, but they don't "float"; that is to say, no text appears to either side. The trick is
[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...

Duisauteirure
dolorin reprehenderitin voluptate velit
esse cillum doloreeu fugiat nullapariatur.

...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 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;" | &alpha; 3 | style="border: 1px solid black; text-align:center;" | cell2 4 {| style="border: 2px solid black; background: #ffffcc;" <!-- The nested table must be on a new line --> 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:

αcell2 the original table again

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:

<divstyle="width: 75%; height: 10em; overflow: auto; border: 2px solid red;"> {| class="wikitable" |- | abc || def || ghi |- style="height: 100px;" | jkl || style="width: 200px;" | mno || pqr |- | stu || vwx || yz |} </div>

As it appears in a browser:

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

As it appears in a browser:

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:

stuvwxyz
stuvwxyz
stuvwxyz

To make the table blend in with the background, use or . (Warning: , 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 template, use for the darker header, and 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, 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:

Vertical alignment in cells[edit]

By default, text is aligned to the vertical middle of the cell:

Row headerA 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 headerExcepteur 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 CSS to the rows (unfortunately, it seems to be necessary to apply this individually to every single row). The attribute is obsolete and should not be used.

Wiki markup:

{|class="wikitable"style="width:400px;"|-style="vertical-align:top;"!scope="row"style="width:10%;"|Rowheader|style="width:70%;"|Alongerpieceoftext.Loremipsum...|style="width:20%;"|Shorttext|-style="vertical-align:top;"!scope="row"|Rowheader|Excepteursintoccaecat...|Shorttext|}
Row headerA 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 headerExcepteur 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 .

Wiki markup:

{| class="wikitable" |- | Cell content that is not indented || 1 |- | style="padding-left: 2em;" | Indented content || 2 |}
Cell content that is not indented1
Indented content2

Row operations[edit]

Height[edit]

(See § Width, height, above.)

Border[edit]

(See § Setting borders, above.)

Alignment[edit]

(See § Positioning, above.)

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: 225px;" | 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 |}
NameEffectGames found in
Poké BallRegular Poké BallAll versions
Great BallBetter than a Poké BallAll 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 wideThis column is 200 points wideThis column is 300 points wide
blahblihbluh

You can also use percentages, such as to equalize the widths of a two-column table by setting one of them to .

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.

CountryCapital
The NetherlandsAmsterdam
CountryCapital
FranceParis

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 in a non-header cell on the longest/widest cell to affect the entire column.

Without , as it appears in a browser:

EpisodeDateSummary
"The Journey Begins"January 1, 2010Lorem 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, 2010Lorem 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.
"So Long"January 15, 2010Lorem 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 , on both the Episode and Date columns, as it appears in a browser:

EpisodeDateSummary
"The Journey Begins"January 1, 2010Lorem 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, 2010Lorem 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.
"So Long"January 15, 2010Lorem 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.

Tooltips[edit]

You can add tooltips to columns by using the {{H:title}} template. Simply replace the column-title with , 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...

First headerSecond header
Upper leftUpper middle

Right side

Lower leftLower middle

Text before a nested table...

Two Wikipedia logos

...text after a nested table

...text after centered table

Floating images in the center[edit]

A table can be used to wrap an image, so that the table can float towards the center of the page (such as using: ). However, the table margins, border and font-size must be precisely set to match a typical image display. The File-spec parameter (although auto-thumbnailing to user-preference width) forces a wide left-margin that squeezes the nearby text, so the parameter can be added to suppress the left-margin padding. However, sometimes shoves the caption to a 2nd line (under a centered box "[]"), so could be omitted and just hard-code the image size, adding a gray (#BBB) border. Using precise parameters to match other images, a floating-image table can be coded as follows:

{| style="float: right; border: 1px solid #BBB; margin: .46em 0 0 .2em;" |- style="font-size: 86%;" | style="vertical-align: top;" |[[File:DuraEuropos-TempleOfBel.jpg|180px]]<!-- --><br /> Temple of [[Bel (mythology)|Bel]] (floating). |}

The text inside the floating table is sized by . That floating-image table floats a typical image box, but allows adjusting the left-hand margin of the image (see temple-example floating below).

Infobox A
This sample infobox shows how the floating image box aligns toward the center.

 Temple of Bel (floating).
The dashed border around this table shows the implicit margins of Images using "thumb|right".

The caption text can be omitted, or remove the parameter "thumb|" so the caption is hidden until "mouse-over display". Unfortunately the parameter (used for displaying the caption) also controls the auto-thumbnailing to re-size images by user-preferences size. To have auto-thumbnail sizing while also concealing the caption, use instead of .

An image set with parameter has a wide right-side margin (opposite margin of parameter ), so floating toward the left can be achieved with an image set as inside a table with style="float:left; margin:0.46em 0.2em;".

Recall that, outside an image-table, the parameter causes an image to align (either) above or below an infobox, but would not float alongside the infobox.

Note the order of precedence: first come infoboxes or images using , then come the floating tables, and lastly, any text wraps that can still fit. If the first word of the text is too long, no text will fit to complete the left-hand side, so beware creating a "ragged left margin" when not enough space remains for text to fit alongside floating tables.

If multiple single-image tables are stacked, they float to align across the page, depending on page width. The text squeezes to allow as many floating tables as can fit, as auto-aligned, then wrap whatever text can still fit at the left-hand side.


...by float: right

Vector toolbar – default

Monobook toolbar

abcdefghi
jklmnopqr
stuvwxyz

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *