Help:Editing: Difference between revisions
Jump to navigation
Jump to search
(New page: == Frequently Used == * Arrows: : ⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔ : <tt>⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ...) |
(→Tables) |
||
(46 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
== Styles in this Wiki == |
|||
{| class="wikitable" width="100%" |
|||
|- |
|||
!Width="50%"|Hint!!Width="50%"|Result |
|||
|- |
|||
|Width="50%"| Hide long source file |
|||
<pre> |
|||
The following scripts a well-known message |
|||
{{pl2| |
|||
{{hidden|<tt>/path/file.sh</tt> |
|||
([{{#filelink: file.sh}} download])|{{#fileanchor: file.sh}} |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo Hello, World |
|||
</source>|headerstyle=background:#ccccff;text-align:left;}} }} |
|||
</pre> |
|||
| |
|||
The following scripts a well-known message |
|||
{{pl2| |
|||
{{hidden|<tt>/path/file.sh</tt> |
|||
([{{#filelink: file.sh}} download])|{{#fileanchor: file.sh}} |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo Hello, World |
|||
</source>|headerstyle=background:#ccccff;text-align:left;}} }} |
|||
|} |
|||
== Hint and Tips == |
|||
{| class="wikitable" |
|||
|- |
|||
!Width="50%"|Hint!!Width="50%"|Result |
|||
|- |
|||
|Use the template '''[[Template:pl2]]''' to intend '''pre''', '''source'''... block by ''2em'': |
|||
<source lang="html4strict"> |
|||
* Some header |
|||
{{pl2|1=<pre>A left padded block</pre>}} |
|||
</source> |
|||
| |
|||
* Some header |
|||
{{pl2|1=<pre>A left padded block</pre>}} |
|||
|- |
|||
|... but the template above '''can't''' be used for tables: |
|||
<source lang="html4strict"> |
|||
* Some header |
|||
<div style="padding-left:2em;"> |
|||
{| |
|||
|- |
|||
| hello || world |
|||
|} |
|||
</div> |
|||
</source> |
|||
| |
|||
* Some header |
|||
<div style="padding-left:2em;"> |
|||
{| |
|||
|- |
|||
| hello || world |
|||
|} |
|||
</div> |
|||
|- |
|||
| Use template [[Template:Hidden]] to hide some section with toggle button (see [http://en.wikipedia.org/wiki/Template:Hidden]). |
|||
<source lang="html4strict"> |
|||
{{hidden|header|hidden message |
|||
|style=background:#ccccff |
|||
|headerstyle=text-align:left; |
|||
|contentstyle=text-align:right}} |
|||
</source> |
|||
| {{hidden|header|hidden message |
|||
|style=background:#ccccff |
|||
|headerstyle=text-align:left; |
|||
|contentstyle=text-align:right}} |
|||
|- |
|||
| Use template [[Template:Hide]] for a simpler version |
|||
<source lang="html4strict"> |
|||
Below you can find some hidden text {{hide| |
|||
'''This is the famous hidden text'''}} |
|||
</source> |
|||
|Below you can find some hidden text {{hide| |
|||
'''This is the famous hidden text'''}} |
|||
|- |
|||
| Use template [[Template:Toggle]] and '''_toggler''' class for more elaborate use. '''_toggler''' is used to create button to toggle visibility of tags of given class. Note that you can assign several classes to the same tag: |
|||
<source lang="html4strict"> |
|||
* {{toggle|item1|ITEM1|item1 item}} |
|||
* {{toggle|item2|ITEM2|item2 item}} |
|||
* <span class="_toggler-item1">toggle item1</span> |
|||
* <span class="_toggler-item2">toggle item2</span> |
|||
* <span class="_toggler-item">toggle both items</span> |
|||
</source> |
|||
| |
|||
* {{toggle|item1|ITEM1|item1 item}} |
|||
* {{toggle|item2|ITEM2|item2 item}} |
|||
* <span class="_toggler-item1">toggle item1</span> |
|||
* <span class="_toggler-item2">toggle item2</span> |
|||
* <span class="_toggler-item">toggle both items</span> |
|||
|- |
|||
| Use <tt><nowiki>__TOC__</nowiki></tt> to control the location of the Table Of Content. This is particularly handy when there are some texts before the first heading in a page, and you want the TOC to appear first. |
|||
| |
|||
|- |
|||
|'''Page REDIRECT''' - To automatically redirect one page to another: |
|||
:<source lang="html4strict" enclose="prevalid"> |
|||
#REDIRECT [[SomePage]] |
|||
</source> |
|||
| |
|||
#REDIRECT [[SomePage]] |
|||
|} |
|||
== Frequently Used == |
== Frequently Used == |
||
* Arrows: |
|||
{| align="center" {{Prettytable}} |
|||
: ⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔ |
|||
|- |
|||
: <tt>&rArr; &lArr; &dArr; &uArr; &hArr; &rarr; &darr; &uarr; &larr; &harr;</tt> |
|||
|{{Hl2}} |'''Description''' |
|||
|{{Hl2}} |'''You type''' |
|||
|{{Hl2}} |'''You get''' |
|||
|- |
|||
| colspan="3" align="center" | ''only at the beginning of the line'' |
|||
|- |
|||
|Definition list |
|||
| |
|||
<tt>;Definition<br /> |
|||
:item 1<br /> |
|||
:item 2<br /></tt> |
|||
| |
|||
;Definition |
|||
:item 1 |
|||
:item 2 |
|||
|} |
|||
== HTML entities == |
|||
{| align="center" {{Prettytable}} |
|||
|- |
|||
|{{Hl2}} |'''Description''' |
|||
|{{Hl2}} |'''You type''' |
|||
|{{Hl2}} |'''You get''' |
|||
|- |
|||
| colspan="3" align="center" | ''anywhere'' |
|||
|- |
|||
|Arrows entities |
|||
| |
|||
<tt>&rArr; &lArr; &dArr; &uArr; &hArr; &rarr; &darr; &uarr; &larr; &harr;</tt> |
|||
| |
|||
⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔ |
|||
|- |
|||
|Space |
|||
| |
|||
<tt>&nbsp;</tt> |
|||
| |
|||
|
|||
|- |
|||
|Colon |
|||
| |
|||
<tt>&#58;</tt> |
|||
| |
|||
: |
|||
|- |
|||
|Equal sign |
|||
| |
|||
<tt>&#61;</tt> |
|||
| |
|||
= |
|||
|- |
|||
|Vertical bar |
|||
| |
|||
<tt>&#124;</tt> |
|||
| |
|||
| |
|||
|} |
|||
== HTML Tags == |
|||
{| align="center" class="wikitable" |
|||
|- |
|||
!width="10%"|Description |
|||
!Example |
|||
!Result |
|||
|- |
|||
|[http://www.w3schools.com/tags/tag_FONT.asp <tt>font</tt>] |
|||
|<tt><nowiki>Change the <font color="red">font color</font></nowiki></tt><br/> |
|||
<tt><nowiki>Change the <font size="3">font size</font></nowiki></tt><br/> |
|||
<tt><nowiki>Change the <font face="verdana">font face</font></nowiki></tt> |
|||
|Change the <font color="red">font color</font><br/> |
|||
Change the <font size="3">font size</font><br/> |
|||
Change the <font face="verdana">font face</font> |
|||
|- |
|||
|[http://www.w3schools.com/tags/tag_strike.asp <tt>strike</tt>] / [http://www.w3schools.com/tags/tag_strike.asp <tt>s</tt>]<br/> |
|||
[http://www.w3schools.com/tags/tag_u.asp <tt>u</tt>]<br/> |
|||
[http://www.w3schools.com/tags/tag_span.asp <tt>span</tt>] |
|||
|<tt><nowiki><strike>Strike out</strike> or <u>underline</u> text, or write it |
|||
<span style="font-variant:small-caps">in small caps</span>.</nowiki></tt> |
|||
|<s>Strike out</s> or <u>underline</u> text, or write it <span style="font-variant:small-caps">in small caps</span>. |
|||
|} |
|||
== Linking to Uploaded Files == |
|||
{| align="center" {{Prettytable}} |
|||
|- |
|||
|{{Hl2}} |'''Description''' |
|||
|{{Hl2}} |'''You type''' |
|||
|{{Hl2}} |'''You get''' |
|||
|- |
|||
|Linking to file |
|||
|<tt><nowiki>[[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]]</nowiki></tt> |
|||
|[[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]] |
|||
|} |
|||
== Tables == |
|||
Reference: https://meta.wikimedia.org/wiki/Help:Table |
|||
Basic syntax for table is |
|||
<table> |
|||
<tr> |
|||
<td valign="top"> |
|||
<tt>{| <font color="green">''[opt-table-attr]''</font> |
|||
|+ <font color="green">''[opt-caption-attr]<font color="red">|</font>''</font>Caption |
|||
|- <font color="green">''[opt-line-attr]''</font> |
|||
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Orange |
|||
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Apple |
|||
|- <font color="green">''[opt-line-attr]''</font> |
|||
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font> |
|||
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Pie |
|||
|- <font color="green">''[opt-line-attr''</font> |
|||
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Butter |<font color="green">''[opt-cell-attr]</font>|'' Ice cream |
|||
|} |
|||
</tt> |
|||
</td> |
|||
<td>which gives...</td> |
|||
<td valign="top"> |
|||
<tt><table <font color="green">''[opt-table-attr]''</font>> |
|||
<caption <font color="green">''[opt-caption-attr]''</font>>Caption</caption> |
|||
<tr <font color="green">''[opt-line-attr]''</font>> |
|||
<td <font color="green">''[opt-cell-attr]''</font>>Orange</td> |
|||
<td <font color="green">''[opt-cell-attr]''</font>>Apple</td> |
|||
</tr> |
|||
<tr <font color="green">''[opt-line-attr]''</font>> |
|||
<td <font color="green">''[opt-cell-attr]''</font>></td> |
|||
<td <font color="green">''[opt-cell-attr]''</font>>Pie</td> |
|||
</tr> |
|||
<tr <font color="green">''[opt-line-attr]''</font>> |
|||
<td <font color="green">''[opt-cell-attr]''</font>>Butter</td><td <font color="green">''[opt-cell-attr]''</font>>Ice cream</td> |
|||
</tr> |
|||
</table></tt> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
{| {{Prettytable}} |
|||
|- |
|||
|Width="50%"|Table can be easily formatted using templates like: |
|||
<source lang="c"> |
|||
{| {{Prettytable}} |
|||
|- |
|||
|{{Hl2}}|First |
|||
|Second |
|||
|- |
|||
|Third |
|||
|{{Hl2}}|Fourth |
|||
|} |
|||
</source> |
|||
|Width="50%"| |
|||
{| {{Prettytable}} |
|||
|- |
|||
|{{Hl2}}|First |
|||
|Second |
|||
|- |
|||
|Third |
|||
|{{Hl2}}|Fourth |
|||
|} |
|||
|- |
|||
|Or better yet, using ''CSS'' (eg. see [[MediaWiki:Common.css]]) class '''wikitable''' (see [[metawikipedia:Help:Table|Table]]): |
|||
<source lang="c"> |
|||
{| class="wikitable" |
|||
|- |
|||
!First |
|||
|Second |
|||
|- |
|||
|Third |
|||
!Fourth |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" |
|||
|- |
|||
!First |
|||
|Second |
|||
|- |
|||
|Third |
|||
!Fourth |
|||
|} |
|||
|- |
|||
|Cell content can be formatted for each cell individually or for all cells on a same row |
|||
<source lang="c"> |
|||
{| class="wikitable" |
|||
|- |
|||
!Very long header |
|||
!Very long header |
|||
!Very long header |
|||
|- |
|||
|align="left"|left |
|||
|align="center"|center |
|||
|align="right"|right |
|||
|- align="center" |
|||
|center |
|||
|center |
|||
|center |
|||
|} |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" |
|||
|- |
|||
!Very long header |
|||
!Very long header |
|||
!Very long header |
|||
|- |
|||
|align="left"|left |
|||
|align="center"|center |
|||
|align="right"|right |
|||
|- align="center" |
|||
|center |
|||
|center |
|||
|center |
|||
|} |
|||
|- |
|||
|To align vertically a cell, add tag <code>valign</code> to ''each row'': |
|||
<source lang="c"> |
|||
{| class="wikitable" |
|||
|- |
|||
|one<br/>two<br/>three |
|||
|default (center) |
|||
|- valign=top |
|||
|one<br/>two<br/>three |
|||
|top |
|||
|- valign=center |
|||
|one<br/>two<br/>three |
|||
|center |
|||
|- valign=bottom |
|||
|one<br/>two<br/>three |
|||
|bottom |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" |
|||
|- |
|||
|one<br/>two<br/>three |
|||
|default (center) |
|||
|- valign=top |
|||
|one<br/>two<br/>three |
|||
|top |
|||
|- valign=center |
|||
|one<br/>two<br/>three |
|||
|center |
|||
|- valign=bottom |
|||
|one<br/>two<br/>three |
|||
|bottom |
|||
|} |
|||
|- |
|||
|To center a table adds <tt>style="margin:auto"</tt>: |
|||
<source lang="c"> |
|||
{| class="wikitable" style="margin:auto" |
|||
! header1 !! header2 |
|||
|- |
|||
| a || b |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" style="margin:auto" |
|||
! header1 !! header2 |
|||
|- |
|||
| a || b |
|||
|} |
|||
|- |
|||
|To center the content of all cells in a table adds <tt>style="text-align:center"</tt>: |
|||
<source lang="c"> |
|||
{| class="wikitable" style="text-align:center" |
|||
! header1 !! header2 |
|||
|- |
|||
| a || b |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" style="text-align:center" |
|||
! header1 !! header2 |
|||
|- |
|||
| a || b |
|||
|} |
|||
|- |
|||
|Use <code>style="table-layout:fixed"</code> to force uniform column width in a table. The table width must be also specified for this to work correctly. |
|||
<source lang="c"> |
|||
{| class="wikitable" style="table-layout:fixed" width="200pt" |
|||
|- |
|||
! h1 !! h2 !! h3 !! h4 |
|||
|- |
|||
|a|very|very very|long text string in a same cell |
|||
|} |
|||
</source> |
|||
| |
|||
{| class="wikitable" style="table-layout:fixed" width="300pt" |
|||
|- |
|||
! h1 !! h2 !! h3 !! h4 |
|||
|- |
|||
|a||very||very very||long text string in a same cell |
|||
|} |
|||
|} |
|||
== Multi-Columns == |
|||
Reference: [http://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout Module] |
|||
<source lang="html4strict"> |
|||
<div style="column-width:25em;-webkit-column-width:25em;-moz-column-width:25em;"> |
|||
... |
|||
<p style="break-before:column;"/> |
|||
... |
|||
</div> |
|||
</source> |
|||
== Using Extensions == |
|||
=== Raw File === |
|||
See reference syntax [http://wiki.yobi.be/wiki/Mediawiki_RawFile#Syntax here] |
|||
{| {{Prettytable}} |
|||
|- |
|||
|Example without anchor (best choice when block immediately follows the link). |
|||
<pre> |
|||
Download [{{#file: HelpRawScript.sh}} this file]. |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'Hello, World!' |
|||
</source> |
|||
</pre> |
|||
| |
|||
Download [{{#file: HelpRawScript.sh}} this file]. |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'Hello, World!' |
|||
</source> |
|||
|- |
|||
|Example with an anchor (necessary when there is intermediate block - but need keeping name in sync!).<br> |
|||
When anchor is on another page, use notation '''<code><nowiki>{{#fileLink: myscript.sh|Another Page}}</nowiki></code>''' |
|||
<pre> |
|||
Download [{{#filelink: HelpAnotherRawScript.sh}} this file]. |
|||
<pre> |
|||
This block is just to confuse RawFile |
|||
</pre> |
|||
{{#fileanchor: HelpAnotherRawScript.sh}} |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'Hello, World!' |
|||
</source> |
|||
</pre> |
|||
|Download [{{#filelink: HelpAnotherRawScript.sh}} this file]. |
|||
<pre> |
|||
This block is just to confuse RawFile |
|||
</pre> |
|||
{{#fileanchor: HelpAnotherRawScript.sh}} |
|||
<source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'I said "Hello, World!"' |
|||
</source> |
|||
|- |
|||
| For very long text, it is possible to hide the file content using CSS <code>style="display:none"</code> |
|||
<pre> |
|||
Download [{{#file: HiddenRawScript.sh}} this file]. |
|||
<div style="display:none"><source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'Hello, Wonderland!' |
|||
</source></div> |
|||
</pre> |
|||
| |
|||
Download [{{#file: HiddenRawScript.sh}} this file]. |
|||
<div style="display:none"><source lang="bash"> |
|||
#! /bin/bash |
|||
echo 'Hello, Wonderland!' |
|||
</source></div> |
|||
|} |
|||
== External Links == |
== External Links == |
||
=== MediaWiki === |
=== MediaWiki === |
||
* [http://www.mediawiki.org/wiki/Help:Editing Help:Editing] |
|||
* [http://www.mediawiki.org/wiki/Manual:Interface/Stylesheets Manual:Interface/Stylesheets] |
|||
* [http://www.mediawiki.org/wiki/Help:Images Help:Images] |
|||
=== MediaWiki - Meta === |
|||
;[[metawikipedia:Help:Contents|Help Contents]] |
|||
* [http://www.mediawiki.org/wiki/Help:Formatting Official help on formatting] |
|||
;[[metawikipedia:Help:Editing|Editing]] |
|||
* [http://www.mediawiki.org/wiki/Help:Tables Help:Tables] |
|||
:[[metawikipedia:Help:Advanced editing|Advanced editing]] | [[metawikipedia:Help:Editing FAQ|Editing FAQ]] | [[metawikipedia:Help:Edit toolbar|Edit toolbar]] | [[metawikipedia:Help:Export|Export]] | [[metawikipedia:Help:Import|Import]] | [[metawikipedia:Help:Editing shortcuts|Shortcuts]] |
|||
;Style & formatting |
|||
:[[metawikipedia:Help:Wikitext examples|Wikitext examples]] | [[metawikipedia::Help:Reference card|Reference card]] | [[metawikipedia:Help:HTML in wikitext|HTML in wikitext]] | [[metawikipedia:Help:List|List]] | [[metawikipedia:Help:Table|Table]] | [[metawikipedia:Help:Sorting|Sorting]] | [[metawikipedia:Help:Cascading_style_sheets|CSS]] |
|||
;Images |
|||
:[[metawikipedia:Help:Images and other uploaded files|Images and Uploaded files]] |
|||
=== From Wikipedia === |
=== From Wikipedia === |
||
* |
*[[wikipedia:Wikipedia:How_to_edit_a_page|How_to_edit_a_page]] |
||
* |
*[[wikipedia:Help:Editing|Editing]] |
||
*[[wikipedia:Wikipedia:User_Page_Design_Center|Wikipedia:User_Page_Design_Center]] |
|||
* [http://en.wikipedia.org/wiki/Help:Wikitext Help:WikiText] |
|||
**[[wikipedia:Wikipedia:User_Page_Design_Center/Style|Wikipedia:User_Page_Design_Center/Style]] |
|||
* [http://en.wikipedia.org/wiki/Help:List Help:List] |
|||
* [[wikipedia:Image_markup|Wikipedia:Extended image syntax]] |
|||
* [http://en.wikipedia.org/wiki/Help:Table Help:Table] |
|||
* [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_User_Page_Help/Do-It-Yourself/Formatting_Text More formatting help] |
Latest revision as of 19:10, 22 September 2020
Styles in this Wiki
Hint | Result |
---|---|
Hide long source file
The following scripts a well-known message {{pl2| {{hidden|<tt>/path/file.sh</tt> ([{{#filelink: file.sh}} download])|{{#fileanchor: file.sh}} <source lang="bash"> #! /bin/bash echo Hello, World </source>|headerstyle=background:#ccccff;text-align:left;}} }} |
The following scripts a well-known message /path/file.sh
([{{#filelink: file.sh}} download])
{{#fileanchor: file.sh}} #! /bin/bash
echo Hello, World
|
Hint and Tips
Hint | Result | ||
---|---|---|---|
Use the template Template:pl2 to intend pre, source... block by 2em:
* Some header
{{pl2|1=<pre>A left padded block</pre>}}
|
A left padded block | ||
... but the template above can't be used for tables:
* Some header
<div style="padding-left:2em;">
{|
|-
| hello || world
|}
</div>
|
| ||
Use template Template:Hidden to hide some section with toggle button (see [1]).
{{hidden|header|hidden message
|style=background:#ccccff
|headerstyle=text-align:left;
|contentstyle=text-align:right}}
|
header
hidden message | ||
Use template Template:Hide for a simpler version
Below you can find some hidden text {{hide|
'''This is the famous hidden text'''}}
|
Below you can find some hidden text
This is the famous hidden text
|
||
Use template Template:Toggle and _toggler class for more elaborate use. _toggler is used to create button to toggle visibility of tags of given class. Note that you can assign several classes to the same tag:
* {{toggle|item1|ITEM1|item1 item}}
* {{toggle|item2|ITEM2|item2 item}}
* <span class="_toggler-item1">toggle item1</span>
* <span class="_toggler-item2">toggle item2</span>
* <span class="_toggler-item">toggle both items</span>
|
| ||
Use __TOC__ to control the location of the Table Of Content. This is particularly handy when there are some texts before the first heading in a page, and you want the TOC to appear first. | |||
Page REDIRECT - To automatically redirect one page to another:
|
|
Frequently Used
Description | You type | You get |
only at the beginning of the line | ||
Definition list |
;Definition |
|
HTML entities
Description | You type | You get |
anywhere | ||
Arrows entities |
⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔ |
⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔ |
Space |
|
|
Colon |
: |
: |
Equal sign |
= |
= |
Vertical bar |
| |
| |
HTML Tags
Description | Example | Result |
---|---|---|
font | Change the <font color="red">font color</font> Change the <font size="3">font size</font> |
Change the font color Change the font size |
strike / s |
<strike>Strike out</strike> or <u>underline</u> text, or write it <span style="font-variant:small-caps">in small caps</span>. |
Linking to Uploaded Files
Description | You type | You get |
Linking to file | [[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]] | My file |
Tables
Reference: https://meta.wikimedia.org/wiki/Help:Table
Basic syntax for table is
{| [opt-table-attr] |+ [opt-caption-attr]|Caption |- [opt-line-attr] |[opt-cell-attr |]Orange |[opt-cell-attr |]Apple |- [opt-line-attr] |[opt-cell-attr |] |[opt-cell-attr |]Pie |- [opt-line-attr |[opt-cell-attr |]Butter |[opt-cell-attr]| Ice cream |} |
which gives... |
<table [opt-table-attr]> <caption [opt-caption-attr]>Caption</caption> <tr [opt-line-attr]> <td [opt-cell-attr]>Orange</td> <td [opt-cell-attr]>Apple</td> </tr> <tr [opt-line-attr]> <td [opt-cell-attr]></td> <td [opt-cell-attr]>Pie</td> </tr> <tr [opt-line-attr]> <td [opt-cell-attr]>Butter</td><td [opt-cell-attr]>Ice cream</td> </tr> </table> |
Table can be easily formatted using templates like:
{| {{Prettytable}}
|-
|{{Hl2}}|First
|Second
|-
|Third
|{{Hl2}}|Fourth
|}
|
| |||||||||
Or better yet, using CSS (eg. see MediaWiki:Common.css) class wikitable (see Table):
{| class="wikitable"
|-
!First
|Second
|-
|Third
!Fourth
|}
|
| |||||||||
Cell content can be formatted for each cell individually or for all cells on a same row
{| class="wikitable"
|-
!Very long header
!Very long header
!Very long header
|-
|align="left"|left
|align="center"|center
|align="right"|right
|- align="center"
|center
|center
|center
|}
|}
|
| |||||||||
To align vertically a cell, add tag valign to each row:
{| class="wikitable"
|-
|one<br/>two<br/>three
|default (center)
|- valign=top
|one<br/>two<br/>three
|top
|- valign=center
|one<br/>two<br/>three
|center
|- valign=bottom
|one<br/>two<br/>three
|bottom
|}
|
| |||||||||
To center a table adds style="margin:auto":
{| class="wikitable" style="margin:auto"
! header1 !! header2
|-
| a || b
|}
|
| |||||||||
To center the content of all cells in a table adds style="text-align:center":
{| class="wikitable" style="text-align:center"
! header1 !! header2
|-
| a || b
|}
|
| |||||||||
Use style="table-layout:fixed" to force uniform column width in a table. The table width must be also specified for this to work correctly.
{| class="wikitable" style="table-layout:fixed" width="200pt"
|-
! h1 !! h2 !! h3 !! h4
|-
|a|very|very very|long text string in a same cell
|}
|
|
Multi-Columns
Reference: CSS Multi-column Layout Module
<div style="column-width:25em;-webkit-column-width:25em;-moz-column-width:25em;">
...
<p style="break-before:column;"/>
...
</div>
Using Extensions
Raw File
See reference syntax here
Example without anchor (best choice when block immediately follows the link).
Download [{{#file: HelpRawScript.sh}} this file]. <source lang="bash"> #! /bin/bash echo 'Hello, World!' </source> |
Download [{{#file: HelpRawScript.sh}} this file]. #! /bin/bash
echo 'Hello, World!'
|
Example with an anchor (necessary when there is intermediate block - but need keeping name in sync!). When anchor is on another page, use notation Download [{{#filelink: HelpAnotherRawScript.sh}} this file]. <pre> This block is just to confuse RawFile </pre> {{#fileanchor: HelpAnotherRawScript.sh}} <source lang="bash"> #! /bin/bash echo 'Hello, World!' </source> |
Download [{{#filelink: HelpAnotherRawScript.sh}} this file].
This block is just to confuse RawFile {{#fileanchor: HelpAnotherRawScript.sh}} #! /bin/bash
echo 'I said "Hello, World!"'
|
For very long text, it is possible to hide the file content using CSS style="display:none"
Download [{{#file: HiddenRawScript.sh}} this file]. <div style="display:none"><source lang="bash"> #! /bin/bash echo 'Hello, Wonderland!' </source></div> |
Download [{{#file: HiddenRawScript.sh}} this file]. |
External Links
MediaWiki
MediaWiki - Meta
- Help Contents
- Editing
- Advanced editing | Editing FAQ | Edit toolbar | Export | Import | Shortcuts
- Style & formatting
- Wikitext examples | Reference card | HTML in wikitext | List | Table | Sorting | CSS
- Images
- Images and Uploaded files