Content deleted Content added
Timeshifter (talk | contribs) →Highlight rows on hover: Moved "Colors in tables" section here. From Help:Table. |
Timeshifter (talk | contribs) →Other table syntax: Moved this section here from Help:Table. There is more room here for this more advanced info. |
||
Line 979:
If desired one can keep the coloring by copying the table as an image. This may be necessary for frequently updated colored tables where it would be too time consuming to add color to many cells after each update. There is no problem with copyright for most data tables, colored or not. They are in the public ___domain. See [[Commons:Template:PD-chart]].
== Other table syntax ==
The types of table syntax that MediaWiki supports are:
# Wikicode <code> | </code> syntax
# HTML (and XHTML)
# Mixed XHTML and wikicode ('''Do not use''')
All three are supported by MediaWiki and create (currently) valid HTML output, but the [[#Wikicode syntax|§ Wikicode syntax]] is the simplest. Mixed HTML and wikicode <code> | </code> syntax (i.e., unclosed <code> | </code> and <code><nowiki>|-</nowiki></code> tags) don't necessarily remain browser-supported in the future, especially on mobile devices.<!--Is this saying what it is supposed to say? This sentence and the corresponding bullet point above were unclear. What is meant by "unclosed |" here? Does this mean starting and ending the table with "<table>...</table>" instead of "{|...|}"? How could this possibly be affected by "browser support"? MediaWiki converts it not matter what into HTML output on the fly. The only real reason not to mix the markup is probably simply because it's sloppy and confusing. -->
See also [[HTML element#Tables]].
=== Unsupported Html elements ===
Note, however, that the <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>colgroup</code>, and <code>col</code> elements are currently not [[Help:HTML in wikitext#thead, tfoot, tbody|not supported in MediaWiki]], {{as of|lc=y|2025|01}}.
=== Table syntax comparison ===
{{mw-datatable}}
{| class="wikitable mw-datatable"
|+ Table syntax comparison
!
! scope="col" | XHTML
! scope="col" | Wiki-pipe
|-
! scope="row" | Table
| {{tag|table}}
| <code><nowiki>{|</nowiki><br>...<br><nowiki>|}</nowiki></code>
|-
! scope="row" | Caption
| {{tag|caption|content={{var|caption}}}}
| <code><nowiki>|+</nowiki> {{var|caption}}</code>
|-
! scope="row" | Header cell
| {{tag|th|params=scope="col"|content={{var|column header}}}}<br>
{{tag|th|params=scope="row"|content={{var|row header}}}}
| <code><nowiki>! scope="col" | </nowiki>{{var|column header}}</code><br>
<code><nowiki>! scope="row" | </nowiki>{{var|row header}}</code>
|-
! scope="row" | Row
| {{tag|tr}}
| <code><nowiki>|-</nowiki></code>
|-
! scope="row" | Data cell
| {{tag|td|content={{var|cell1}}}}{{tag|td|content={{var|cell2}}}}<br>{{tag|td|content={{var|cell3}}}}
| <code><nowiki>| </nowiki>{{var|cell1}} <nowiki>||</nowiki> {{var|cell2}} <nowiki>||</nowiki> {{var|cell3}}</code><br>
or<br>
<code><nowiki>|</nowiki> {{var|cell1}}</code><br>
<code><nowiki>|</nowiki> {{var|cell2}}</code><br>
<code><nowiki>|</nowiki> {{var|cell3}}</code>
|-
! scope="row" | Cell attribute
| {{tag|td|attribs=style="font-size: 87%;"|content={{var|cell1}}}}
| <code><nowiki>| </nowiki>style="font-size: 87%;" <nowiki>|</nowiki> {{var|cell1}}</code>
|-
! scope="row" | Sample table
| <syntaxhighlight lang=html><table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table></syntaxhighlight>
| <pre>{|
| 1 || 2
|-
| 3 || 4
|}</pre>
<div>
{| class="wikitable" style="margin: auto;"
|-
| 1||2
|-
| 3||4
|}
</div>
|- style="vertical-align: top;"
! scope="row" | Pros
|
* Can preview or debug with any XHTML editor
* Can be indented for easier reading
* Well-known
* Insensitive to newlines
* No characters like "|", which can collide with template and parser function syntax
|
* Easy to write
* Easy to read
* Takes little space
* Can be learned quickly
|- style="vertical-align: top;"
! scope="row" | Cons
|
* Tedious
* Takes a lot of space
* Difficult to read quickly
* Debugging more difficult because of tag pairing requirements
* Indented code might not match nesting.
* Confusing newline behaviour as they only occasionally break cells.
|
* Unfamiliar syntax for experienced HTML editors
* Rigid structure
* Cannot be indented for clarity
* HTML tag text may be easier to read than pipes, plus signs, dashes, etc.
* Requires using {{tlx|!}} to pass a <code> | </code> character in a parameter.
* Sensitive to newlines; see [[Help:Newlines and spaces]].
|}
== See also ==
| |||