Improved Table Support in HTML Reports in Origin 2019b

はじめに

I am following up my previous article Creating HTML Reports and Documents in Origin 2019b by introducing a great new ease of use feature for adding tables to your HTML reports. Long story short, you can copy a worksheet or table from an Origin report sheet and paste it as a link into your HTML. When Origin renders the HTML, it will automatically generate an HTML table containing the source data. It works both for HTML and Markdown Syntax.

How Does it Work?

It is very simple. Read the detailed steps below or watch the animated GIF.

For worksheet data:

1. Navigate to the worksheet whose data you wish to put into your report.
2. Right-click on the worksheet name tab and select Copy Sheet. (Ctrl+C doesn’t work in this case.)
3. Activate the Notes Window for your HTML report and turn off Render Mode (if it is on) via Ctrl+M.
4. In the desired position in your HTML source code, right-click and select Paste Link (Ctrl+Alt+V).
5. You will observe that a field code similar to {{table://[Book1]Sheet1!}} has been inserted at the caret.
6. Now hit Ctrl+M to enter Render Mode.
7. Observe that an HTML table has been generated based on the worksheet.
8. Note that hidden columns and rows will not appear in the table!

For Report Sheet tables

1. Navigate to the report sheet with the table you wish to put into your report.
2. Right-click in any cell of the report table you want to add to your HTML and select Copy Table. (Again, Ctrl+C doesn’t work in this case.)
3. Activate the Notes Window for your HTML report and turn off Render Mode (if it is on) via Ctrl+M.
4. In the desired position in your HTML source code, right-click and select Paste Link (Ctrl+Alt+V).
5. You will observe that a field code similar to {{table://[Book1]FitLinear1!Parameters}} has been inserted at the caret.
6. Now hit Ctrl+M to enter Render Mode.
7. Observe that an HTML table has been generated based on the worksheet.
8. Note that you cannot copy and paste an entire report at once. But most likely you will not want your HTML to be exactly like your Origin report anyway.

That’s it, Copy->Paste Link. Two simple steps for cool results! And as an added bonus, Origin will keep the links properly synced with their sources should the source names change.

Styling the Tables

For those users who want to customize the visual presentation of the generated tables using CSS, the table elements have their class attribute automatically set to origin-table . If you need to, you can change the name of the class on a table-by-table basis by specifying the alternate class name in the field code by adding a space and then the class name after the link but before the }}. For example, {{table://[Book1]Sheet1! my-class}} changes the class name of that particular table to my-class .

To create a default CSS file for all of your current and future automatically generated HTML tables, create a file named global.css within the following sub-folder of your User Files folder: C:\Users\<you>\Documents\OriginLab\User Files\Ohtml\NotePage\styles\global.css . (Note: you will have to manually create those sub-folders. )

まとめ

I hope I have shown you just how easy it is to add data and report tables to your HTML. Thanks you for reading and look out for additional blog posts about HTML reports in the future.