View source for Help:Table/History of pipe syntax development

{{table help}}
Wikicode table syntax, also known as '''pipe syntax''', was developed by [[m:User:Magnus Manske|Magnus Manske]] as a substitute for HTML and employs the [[WP:G#Pipe character|pipe character]] (i.e., vertical bar: <code>&thinsp;|&thinsp;</code>) and other symbols for HTML elements like <code>&lt;tr></code> and <code>&lt;td></code>. There is an [https://magnustools.toolforge.org/html2wiki.php online script], which converts an HTML table to a wikicode table.

The pipe character must start at the beginning of a new line, except when separating parameters from content or when using doubled pipes (<code>||</code>) to separate cells on a single code line. The parameters are optional.

== Tables ==
A [[Table (HTML)|table]] is defined by <code><nowiki>{|</nowiki> {{var|parameters}} <nowiki>|}</nowiki></code>, which generates {{tag|table|params={{var|params}}}}.

== Rows ==
For each table, an HTML {{tag|tr|o}} tag is generated for the first row. To start a new row, use:
<div class=grid>
 |-
</div>
which generates another {{tag|tr|o}}.

Parameters can be added like this:
<div class=grid>
 |- ''params''
which generates {{tag|tr|o|params={{var|params}}}}.
</div>

Note:
* {{tag|tr|o}} tags are automatically opened before the first {{tag|td|o}} equivalent
* {{tag|tr|o}} tags are automatically closed at another {{tag|tr|o}} equivalent and at the {{tag|table|c}} equivalent

== Cells ==
Cells are generated either like this:
<div class=grid>
 |{{var|cell1}}
 |{{var|cell2}}
 |{{var|cell3}}
</div>
or like this:
<div class=grid>
 |{{var|cell1}}||{{var|cell2}}||{{var|cell3}}
</div>
which both generate:
 {{tag|td|content={{var|cell1}}}}{{tag|td|content={{var|cell2}}}}{{tag|td|content={{var|cell3}}}}.

The <code>||</code> equals a newline + <code>&thinsp;|&thinsp;</code>.

Parameters in cells can be used like this:
<div class=grid>
 |{{var|params}}|{{var|cell1}}||{{var|params}}|{{var|cell2}}||{{var|params}}|{{var|cell3}}
</div>
which results in:
<div class=grid>
 {{tag|td|params={{var|params}}|content={{var|cell1}}}}
 {{tag|td|params={{var|params}}|content={{var|cell2}}}}
 {{tag|td|params={{var|params}}|content={{var|cell3}}}}
</div>

== Headers <span class="anchor" id="Headings"></span>==
<!-- anchor "Headings" is included as the old name for this section -->
The code used produces a {{tag|th}}, functioning the same way as {{tag|td}}, but with different style and [[Semantic HTML|semantic meaning]]. A <code>&thinsp;!&thinsp;</code> character is used instead of the opening <code>&thinsp;|&thinsp;</code>, and <code>!!</code> can be used like <code>||</code>, to enter multiple headers on the same line. Parameters still use "|", though. Example:
<div class=grid>
 <nowiki>!</nowiki>{{var|params}}|{{var|cell1}}
</div>

== Captions ==
A {{tag|caption|o}} tag is created by
<code>|+{{var|caption}}</code>
which generates the HTML {{tag|caption|content={{var|caption}}}}.

You can also use parameters:
<nowiki>|+</nowiki>{{var|params}}|caption
which generates {{tag|caption|params={{var|params}}|content={{var|caption}}}}.