How do I convert a Wiki table to a link?
The following HTML code displays a table that is a link to another site. That is, clicking on any pixel in the inner table (even empty space) triggers a link. How do I code this in Wiki using pipe syntax?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Convert A Wiki Table To A Link?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td>
<a href="http://google.com">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</body></html>
The pipe syntax for this table-to-table looks like this (but without <a href = "..."> ... </a>)
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
|
{| border="0" cellpadding="0" cellspacing="0" width="100%"
|-
|style="text-align: left;"|M pigeons
|style="text-align: right;"|000
|-
|colspan="2"|into N holes
|}
|}
How to achieve the effect <a href = "..."> ... </a> like in the HTML code above?
source to share
In short: you can do it with MediaWiki's xref syntax and a single-line HTML table, but it won't work if you've included HTML compilation.
MediaWiki links
MediaWiki disallows tags <a>...</a>
in wikitext by default. This is for security reasons: if your wiki is public and tags are <a>...</a>
allowed without validation, anyone can add arbitrary JavaScript to your site by adding links such as <a onmouseover="alert(1)">foo</a>
.
Instead, you add links to wikitext in two different ways. For internal links to other pages on the same wiki, use [[Page name|display text]]
one that creates something like <a href="/wiki/Page_name" class="mw-redirect" title="Page name">display text</a>
. For external links, you use [http://www.example.com Example]
that creates a link type <a rel="nofollow" class="external text" href="http://www.example.com">Example</a>
.
For which there were probably very good reasons at the time, you can insert newlines in the display text of internal links, but not external links. Thus, the correct link is created:
[[Page name|display text]]
But this is just the as-is output (with the url itself):
[http://www.example.com display text]
This will be important later.
MediaWiki tables
While MediaWiki does not allow tags <a>...</a>
in wikitext, it does allow a subset of HTML tags. This includes <table>
, <tr>
, <th>
and <td>
that means that there are actually two ways to make a table in wikitext. The first uses the wikitext table syntax as you did in your question:
{|
| Row 1, cell 1
| Row 1, cell 2
|-
| Row 2, cell 1
| Row 2, cell 2
|}
The second is to use HTML table elements:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
For wikitext table syntax, you need to add newline characters for the table to display correctly. However, for HTML table tags, you can do everything on one line, eg <table><tr><td>Foo</td></tr></table>
.
How to place tables in links
Inserting a table inside a link in MediaWiki is a matter of placing the appropriate table syntax within the corresponding link syntax. If your link is an internal link, you can choose one of the table syntaxes:
[[Page name|
{|
| Foo
|}
]]
[[Page name|
<table>
<tr>
<td>Foo</td>
</tr>
</table>
]]
They will produce something like the following HTML:
<a href="/wiki/Page_name" class="mw-redirect" title="Page name">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
If your link is external, then since the external link syntax does not accept newlines, you are limited to using HTML tags.
[http://www.example.com <table><tr><td>Foo</td></tr></table>]
This will generate the following HTML:
<a rel="nofollow" class="external text" href="http://www.example.com">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
In your case, the following code should do what you are trying to do:
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
| [http://www.google.com <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="text-align: left;">M pigeons</td><td style="text-align: right;">000</td></tr><tr><td colspan="2">into N holes</td></tr></table>]
|}
Why don't you want to do this
While placing table tags inside links is allowed in HTML 5, it is prohibited in HTML 4.01 or XHTML 1.0. When I tested your HTML with the W3C validator , it gave me that the document type "document type does not allow element" here "." p>
I believe that more recent versions of MediaWiki use HTML 5, so this might not be in itself. However, if your wiki uses HTML encoding software, then tables inside links can be interpreted as broken HTML and "fixed" for you. When I tested the above code on Wikipedia, which I believe is currently using the HTML 5 selection algorithm, the link was shown in front of the table.
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td><a rel="nofollow" class="external text" href="http://www.google.com"></a>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</td>
</tr>
</table>
So, if you really want to do this, then go ahead, but be careful there might be pitfalls.
<a>
One last thing : if you want to use tags in wikitext as-is, you can include $ wgRawHtml . However, do not do this if your wiki is public editable! This will allow people to add random JavaScript to your site, which is not a good idea.
source to share