The following HTML code displays a table which is a link to another site. That is, clicking on any pixel in the inner table (even white space) invokes the link. How do I code this in a Wiki using pipes 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>
Pipes Syntax for this table-in-a-table looks like this (but without the ... )
{| 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 do I achieve the effect of the ... as in the HTML code above?
In a nutshell: you can do this with MediaWiki's external link syntax and a single-line HTML table, but it won't work if you have enabled HTML tidying.
MediaWiki links
In MediaWiki, the default settings are to disallow <a>...</a> tags in wikitext. This is for security reasons: if your wiki is publicly editable and <a>...</a> tags were allowed unchecked, anyone could add arbitrary JavaScript to your site, by adding links like <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, you use [[Page name|display text]], which produces something like display text. For external links, you use [http://www.example.com Example], which produces a link like <a rel="nofollow" class="external text" href="http://www.example.com">Example</a>.
For what were probably Very Good Reasons At The Time, you can insert newline characters into the display text of internal links, but not external links. So this produces a valid link:
[[Page name|display
text]]
But this is just output as-is (with the URL itself linked):
[http://www.example.com display
text]
This will be important later on.
MediaWiki tables
While MediaWiki doesn't allow <a>...</a> tags in wikitext, it does allow a subset of HTML tags. This includes <table>, <tr>, <th> and <td>, which means that there are actually two ways to make tables in wikitext. The first is using wikitext table syntax, like you have done in your question:
{|
| Row 1, cell 1
| Row 1, cell 2
|-
| Row 2, cell 1
| Row 2, cell 2
|}
The second is by using 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 render properly. However, for HTML table tags, you can do everything on one line, like <table><tr><td>Foo</td></tr></table>.
How to put tables in links
Putting a table inside a link in MediaWiki is a matter of putting the appropriate table syntax inside the appropriate link syntax. If your link is an internal link, you can choose either of the table syntaxes:
[[Page name|
{|
| Foo
|}
]]
[[Page name|
<table>
<tr>
<td>Foo</td>
</tr>
</table>
]]
These will both 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 an external one, then because the external link syntax doesn't accept newline characters, you are limited to using HTML table tags.
[http://www.example.com <table><tr><td>Foo</td></tr></table>]
This will produce something like 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 you might not want to do this
While putting table tags inside links is allowed in HTML 5, it is not allowed in HTML 4.01 or XHTML 1.0. When I tested your HTML with the W3C validator, it gave me the error 'document type does not allow element "table" here'.
I believe that more recent versions of MediaWiki use HTML 5, so this might not be an error per se. However, if your wiki uses HTML tidying software, then tables inside links might be interpreted as broken HTML, and "fixed" for you. When I tested the above code on Wikipedia, which I think currently uses the HTML 5 tidying algorithm, the link was rendered before 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 beware that there may be pitfalls.
One last thing: if you want to use <a> tags in wikitext as-is, it is possible to enable the $wgRawHtml option. However, do not do this if your wiki is publicly editable! It will enable people to add random JavaScript to your site, which is Not A Good Idea.
Related
I was browsing the last hours to find a solution for my problem with latest puppeteer (2.0.0) / chromium 78.0.x to get our printing system working. We allow to setup page breaks in tables, which worked find in PhantomJS renderer, but not in the puppeteer/chromium solution.
Beside many little difference in global css and printing PDF header/footer the printing of tables was the last problem (hopefully).
It turns out that the "page-break-before: always" is simply ignored.
Example:
<table>
<thead> ... </thead>
<tbody> ...
<tr style="page-break-before: always;"> ...should be on next page ... </tr>
</tbody>
</table>
Some of the Chrome forum articles point out, this has been solved.
So the question is what is causing the problem.
Regards,
Andre
PS) Later we found now: put a "display: block" on all tags of the table solves the problem. Maybe that helps someone. Any comments on that?
<table style="display: block;">
<thead style="display: block;"> ... </thead>
<tbody style="display: block;"> ...
<tr style="display: block; page-break-before: always;"> ...is now on the next page ... </tr>
</tbody>
</table>
Bad news for the solution we provided above. This destroys the feature of having table headers on each page.
setup 1)
Setting "display: block;" for the thead will disable the feature of having the table header on each page.
==> no page break
setup 2)
Set the thead to "display: table-header-group;" and tbody to "table-row-group" then the chrome will ignore the page-breaks.
==> no table headers on each page
setup 3) Having the thead: "display: table-header-group;" and the tbody: "display: block" is destroying the column structure. The body will be rendered only on the first column.
==> Destroys the table. the body is just in the first column
Here comes our hack to solve the problem. we use setup 3, with this:
- we build a table with just one column
- the column contains a table with all columns we really want to render
- the column widths are set to fix values (that was anyway the case in our rendering system)
<table>
<thead>
<tr>
<td> <table> .... the header of the real table </table> </td>
</tr>
</thead>
<tbody style="display:block;">
<tr>
<td>
<table> .... one row of the real table </table>
<td>
</tr>
<tr>
<td>
<table> .... another row of the real table </table>
<td>
</tr>
</tbody>
</table>
I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding:0;margin:0;height:45px;width:230px;">
<ul style="padding:0;margin:0;height:45px;width:230px;">
<li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
<a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
<img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</li>
</ul>
</td> ......
The problem is visualized on the image below:
Is there something I can do?
Thanks for helping me.
Best regards,
Yab86
If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?
Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="45" width="230" align="left" style="padding:0;">
<a target='_blank' href="https://www.mypage.com">
<img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</td>
</tr>
</table>
I'm using the following project:
http://bootstrap-table.wenzhixin.net.cn/getting-started/
That I integrated using this gem: https://github.com/bjevanchiu/bootstrap-table-rails
It works well but now I'd like to leverage the editable extension provided by the bootstrap-table library
Here is my html:
<table id="table" data-toggle="table" class="table table-striped">
<thead>
<tr>
<th data-field="comments" data-editable="true">Comments</th>
</tr>
</thead>
<tbody>
<%= render #tables %>
</tbody>
</table>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
The rendering works well, I can click on the elements like here: http://vitalets.github.io/x-editable/demo.html
The thing is, my Active Records are not updated after I validate a change. It seems that no "PUT" request happens... (in fact, nothing happens).
I'm new to Rails so I may be missing something obvious... It seems there is a data-url option for the <table> tag but I'm not sure if and how I should use it.
Thanks!
I am trying to import a table from a webpage into a google spreadsheet.
I have tried using the following two functions and both are giving me the error that the "imported content is empty".
=importhtml("http://financials.morningstar.com/ratios/r.html?t=AAPL","table",1)
And
=importxml("http://financials.morningstar.com/ratios/r.html?t=AAPL", "//*[#id='tab-profitability']/table[2]"
p.s. the imported data is for personal use only and will not be used against the websights policies.
It's not possible with your url (http://financials.morningstar.com/ratios/r.html?t=AAPL).
The command =importhtml() it's possible if the webpage has a html table.
I give you an example :
Example
In this URL : http://fr.wikipedia.org/wiki/Démographie_de_l'Inde
In this webpage , you can see a table . The table is a html table
Code in the page :
<table class="wikitable centre" style="text-align: center;">
<tr>
<th colspan="3" scope="col" width="60%">Évolution de la population</th>
</tr>
<tr>
<th>Année</th>
<th>Population</th>
<th><abbr title="Croissance démographique">%±</abbr></th>
</tr>
<tr>
<td>1951</td>
<td>361 088 000</td>
<td>—</td>
</tr>
<tr>
<td>1961</td>
<td>439 235 000</td>
<td>+ 21,6 %</td>
</tr>
<!-- Others value -->
<td colspan="3" align="center"><small>Source : <a rel="nofollow" class="external autonumber" href="http://indiabudget.nic.in/es2006-07/chapt2007/tab97.pdf">[1]</a></small></td>
</tr>
</table>
In your Google Spreadsheet you can show data
=IMPORTHTML("http://fr.wikipedia.org/wiki/Démographie_de_l'Inde"; "table";
In this Webpage ( http://financials.morningstar.com/ratios/r.html?t=AAPL ), you don't have any html table so you can extract values.
I'm trying to convert html to PDF using Rotativa I'm building the report as svg tag in html page and pass the generated view to Rotativa, it prints almost every thing except what's inside (which is here and ):
<svg style="display: block;margin-left: auto;margin-right: auto;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.2" height="1453" width="1040" y="0" x="0">
<switch>
<foreignObject x="49" y="215" width="943" height="500" class="s2_2" requiredExtensions="http://www.w3.org/1999/xhtml">
<p style="line-height: 25px;">
Any words here
</p>
<table cellspacing="0" cellpadding="0" class="styled-table">
<tbody><tr>
<th class="s3_2">Full Name</th>
<th class="s3_2">Source</th>
<th class="s3_2">Date of Birth</th>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
</tbody></table>
</foreignObject>
</switch>
I upgraded wkhtmltopdf.exe in rotativa to latest version (0.13) with no luck.
Is there a solution, workaround or even another module to convert html to PDF.
I don't know why but attribute "requiredExtensions" shouldn't be added when using Rotativa and want to convert to PDF