I'm generating HTML code for regular tables:
<table cellpadding="0" cellpadding="0">
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<tr>
</table>
After generation, I open the HTML file in a browser (Firefox) and copy and paste into blank Google Doc, BUT Google Docs translates the table without borders borders and default format.
There is a way to format the HTML table to meed the Google Docs requirements?
Or there is a way to format a lot of tables of a Google Doc using a macro ? (I mean table borders and single linespacing)
The first thing I notice is the <table> has cellpadding="0" declared on it, twice.
“Do not use [cellpadding or cellspacing], as [they have] been deprecated. The element should be styled using CSS.” —MDN web docs
See this other StackOverflow question for how to set cellpadding and cellspacing in CSS.
This actually addresses your problem, as adding a border-collapse property to your table style will cause allow a table to paste into a Google Doc as a table… if you set it to separate.
Or if you add padding to your td (and th if you have them),
I created this Google Doc, Paste <table> into Docs, with some examples of how different styles effect how a table will paste into a Doc, with those styles noted.
Hope this helps!
I should also note, this was written with copying/pasting taking place in Chrome; different browsers will produce different results. I've also found how much is selected can effect how the table pastes in. My best advice is to experiment based on the look of your table and your desired result.
Related
I am making a report template that is required for my school project. Inside the report, I need to display all the cars and their respective details. As you can see from the code below, I am using spring expression language to perform loop on return data and it works as intended.
<div>
<table>
<tbody>
$foreach{car: entity.cars}
<tr>
<td>${car.name}</td>
<td>${car.color}</td>
<td>${car.model}</td>
</tr>
$end{}
</tbody>
</table>
</div>
However, when I switch between Source and WYSISYG, the whole expression will be omitted from the table element and become like this:
<div> $foreach{car: entity.cars} $end{}
<table>
<tbody>
<tr>
<td>${car.name}</td>
<td>${car.color}</td>
<td>${car.model}</td>
</tr>
</tbody>
</table>
</div>
I have read the documentation from CKEditor and found out there's a feature called 'ACF'. It helps us to discards invalid, useless HTML tags and attributes so the editor remains "clean" during runtime.
I already tried
config.allowedContent = true;
I am not particularly sure whether my problem is caused by the 'ACF' feature. If it does, how can I configure it so that the editor will ignore the expression and leave it as it is?
EDIT
I tested the code above with another rich text editor (RTE) out there. Unfortunately, it turns out all of them return the same result. I believe it is illegal to put such an expression between the table elements in an RTE. How should I modify my code so that it is syntactically correct in an RTE?
I just got a workaround for this issue. I noticed the editor will not remove SPEL if I specifically tell it not to do so in the 'config.js' file.
You can achieve this by configuring protectedSource. For more details, please check this link:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource
I am creating a custom report that is inserted inside a body of an email content in the form of html. My report generates a table with 3 rows and multiple columns. In 1 of the columns the value is determined dynamically via an environment variable (something like this: $CHILD2_BUILD_RESULT) in Jenkins (either SUCCESS or FAILURE). I want to change the font color of this text placed inside depending on the value. Green if it is SUCCESS , Red if it is FAILURE.
My current code (below) is hard-coded and displays green irrespective of the status.
Is this possible just by using CSS or CSS conditional formatting or handlebars without jquery or javascript
<tr>
<td>Test Result</td>
<td style="color: green;"> <strong>$CHILD1_BUILD_RESULT </strong> </td>
<td style="color: green;"> <strong>$CHILD2_BUILD_RESULT </strong> </td>
</tr>
The fact that the rendered HTML is going into an email is knee-capping you a bit here. There are lots of neat tricks you could do with selectors, but emails require that all CSS be inlined -- which means no selectors.
Your best option is to modify the process that builds the final email output and define two new environment variables: CHILD1_BUILD_RESULT_COLOR and CHILD2_BUILD_RESULT_COLOR. These would contain the string values "green" or "red" (depending on the value of CHILD1_BUILD_RESULT and CHILD2_BUILD_RESULT).
I know you were probably hoping for a more elegant solution, but CSS in email is very limited and has always been a pain point for designers and developers.
I came up with a solution by adding a class to the tag. I named the class as the jenkins environment variable that would store wither SUCCESS or FAILURE then I styles 2 .SUCCESS & .FAILURE as needed inline. This could display the output they I wanted to in email.
I am trying to find the xpath of a value in a table located in a frameset in a website to use it on a google spreadsheet for =importxml() to scrape data.
This is the website:
https://eshop.wago.com
<tr>
<td class="text">Connection technology (1) </td>
<td class="text">PUSH WIRE<sup>®</sup> </td>
<td class="text"> </td>
</tr>
For example I want to find the xpath of "Push wire®" right in front of the conncetion technology in the table on the mentioned webpage, when I use the following function in Google spreadsheet it doesn't give any value;
=IMPORTXML(A8, "//*/td[.,='Connection technology (1) ']/following::td[1]")
I think the reason is that the item is located in a frameset and when I try to address the frame with its class it still doesn't work! I am so confused right now. So how can I refer that in "importxml()"?
My answer: you have several problems
1 (out of scope): verify security issues. It is rather usual that the server have not the same behaviour multiple times. It tracks you, authorizes, ...
2 your xpath is not well-formed
this works:
"//*/td['Connection technology (1) ']/following::td[1]"
or this, more robust:
"//*/td[contains(.,'Connection technology (1)')]/following::td[1]"
Hope it helps.
Is it possible to export for example table, or ul tags with all children elements to pdf file? (COULD WE USE ONLY FREE OF CHARGE LIBRARIES?)
For example I have the table.
<table>
<tr>
<td class="my-style">
</td>
</tr>
</table>
Is it possible to export this table to pdf with style. I.e. "my-style" has red color.
Thanks in advance :)
We use PDF Sharp and Migradoc to generate PDF files on the fly. Migradoc has good layout and page break controls.
It has table layouts that are pretty easy to understand for most developers.
http://www.pdfsharp.net
You can use iTextSharp lib, this has the ability to decorate display text as you like.
Check this link:
http://www.codeproject.com/KB/graphics/iTextSharpTutorial.aspx
Sergey,
everyone will have their favourite. however, one that I really like and use literally daily, is the http://www.evopdf.com/. allows you to use your existing asp.net views, so really is a no brainer.
I'm using a extension for Firefox to check for 508 compliance issues.
I'm getting the following two errors which I have been unable to resolve on each report:
Fail: Data tables must use th elements to indicate header cells for the first cell in all the columns or rows.
Fail: For complex data tables, the td elements must have headers attributes that point to associated th header ids.
The addon highlights the following table cell for both errors but I can't find anything wrong with it:
<table cellpadding="5" width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">
<tr> <th id="date_range" colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>
What to do?
I'm using this firefox extension and ran into this same issue today.
It appears that the tool wants to see some text inside the element.
Other dev on the team replaced plain text header labels with buttons and anchors. anchors were passing with the tool, but buttons weren't. We already had the scope defined and all the closing tags (I checked).
Results may differ, but this fixed our issue.
Note that the passing lines have actual text between tags.
Fail: <th><input type="button" text="blah"></input></th>
Fail: <th><img url="blah.jpg"></img></th>
Pass: <th>blah</th>
Pass: <th><span>blah</span></th>
Pass: <th>blah</th>
I see several things about the table that can be improved (inline styles, lack of <tbody>, etc), but header identification is not one of them. Then again, I can't see the entire table. But it looks like the plugin evidently doesn't understand a colspan. Try adding a scope="col" to the header.
For an alternative plugin, try the WAVE toolbar: http://wave.webaim.org/toolbar
UPDATE: Now that I see the table via the pastbin link in the comment, I see some serious problems. First and foremost, there's no closing table tag. You have some rows wider than others. You have an empty row that has has been inserted for display purposes. Don't do that, use CSS.