Exporting a table as html

I am experimenting with HTML export, and am wondering about exporting tables. I can create a table in a note easily enough, however the generated HTML is just a list of cell values from the table as separate paragraphs. How would I get the table to export as an html table?

There is no formal mechanism for marking a section within a single noteā€™s $Text as a(n HTML) table. Although Tinderbox note text is rich text the app is not a word processor like Microsoft Word. The normal method here would be to break the tableā€™s source data out into separate notes per table row. The <table> element and row of column headers are created in the calling template. These notes would either be children of the existing note or could we stored elsewhere and exported via an ^include()^ call.

Letā€™s assume the table holds 3 columns ā€˜Titleā€™, ā€˜Yearā€™ and ā€˜Tagsā€™ with data drawn from $Name, $PublicationYear and $Tags and 3 data rows. In the note whose page you wish to include the table, the body of its export template might look like this:

<h2>^title^</h2>
^text^
<table>
<tr>Title<th></th><th>Year</th><th>Tags</th></tr>
^children("table-row")^
</table>

The ā€˜table-rowā€™ template looks like this:

<tr><td>^value($Name)^</td><td>^value($PublicationYear)^</td><td>^value($Tags.format(", "))^</td></tr>

The four child notes (one per table row) donā€™t need to have an export template assigned directly as the code tell Tinderbox which template with which to export their content. Note the above code should include a line return after the closing tab so the HTML output places each <tr> on a separate source code line. The extra formatting of $Tags exports multiple values with a comma+space between each discrete tag value.

If you need the table to appear inline within the run of text, i.e. within the $Text, of the main note thens you need the ^include()^ approach. Now you need a container note (paced wherever you like) which in this case we call ā€˜Table 1-1ā€™. The previous per-row data notes are now moved become its children. The main calling noteā€™s $Text not the its template now includes this inline export code where you wish the table to occur. The code should be added as a separate paragraph within the Text

^include("Table 1-1","table-wrapper")^

When the note is exported, it tells the export process to insert the exported contents of note ā€˜Table 1-1ā€™ using the template ā€œtable-wrapperā€. We now need to create that new template which looks like this:

<table>
<tr>Title<th></th><th>Year</th><th>Tags</th></tr>
^children("table-row")^
</table>

Now the new container supplies the outer part of table using the same mechanism as before. Of, course the main calling pageā€™s template should now delete any of the <table>-creating code as that is now created entirely by the include process.

Does that help?

1 Like

Yes - that definitely helps! I will give this a try later today. I must say again I am just amazed at the level of the responses on this forum. Thank you for putting so much time and effort into this response!

1 Like

Nice to see the ability to do tables in Tinderbox (Iā€™ve been away for awhile)!

Not exactly the Tinderbox html export that your question addresses, but Iā€™ve found the command line tool textutil can be useful for conversion from rtf to html, including tables in a Tinderbox note, so I thought Iā€™d post about it.

You could, for example, use it to convert a table in a noteā€™s Text to html, paste the html into another note, and export that note instead.

Wrapped in AppleScript, it looks like this:

set the clipboard to (the clipboard as Ā«class RTF Ā»)
set theHTML to do shell script "pbpaste -Prefer rtf | textutil -convert html -stdin -stdout"
set text item delimiters to {"<table", "/table>"}
set the clipboard to "<table " & theHTML's text item 2 & "/table>"
return the clipboard as text -- optional line; sends to Script Editor Result pane

Select the table in the note, command-c to copy to clipboard, run the script (after copy-pasting it into Script Editor in Applications > Utilities and making sure Script Editor.app is enabled at System Preferences > Security & Privacy > Privacy > Accessibility), and paste the results. This of course could be wrapped in something other than AppleScript.

Another quick-and-dirty is to copy-paste into TextEdit (with preferences set to ā€˜Rich Textā€™) and (holding down the option key) File > Save As Web Page (.html). That includes a header that retains some of the original styling from Tinderbox.

I was thinking about using some sort of conversion tool this morning as another option. Iā€™ll give this approach a try as well. Thanks!

The script could be wrapped in a Keyboard Maestro macro that collects the table from the clipboard, passes it to the script (or handles the call directly to the shell command) and puts the result back on the clipboard.


Note: itā€™s obvious, but you probably donā€™t want to paste the table back into the same note :slight_frown:

But you can work around this. If you comment out your table in the original note like this

and use ^value($Text)^ in the export template, then you can paste the HTML table into the note, the original table will be bypassed, and you should get semi-canonical HTML.

(Iā€™ll leave it to @mwra to point out the downside of this quick-and-dirty approach :laughing:)

2 Likes

ā€¦or could ā€˜exportā€™ and then store an HTML version of the table in a note elsewhere that would be used as an export (verbatim) include. However, testing just now (Iā€™ve never put a table in $Text before), ^text^ HTML exports the tableā€™s cell contents so even if you inserted an HTML table into the export youā€™d need to post-process and remove the ā€˜falseā€™ paragraphs created from RTF table cell content.

Actually, unless youā€™re doing HTML for some really picky customer who actually looks at HTML source, I think the work-around is actually pretty good (for current functionality, i.e. as at 7.0.3).

Note: if typing HTML comment markers inline in your $Text you need to temporarily toggle smart dashes ā€˜offā€™ or 2 hyphens get auto corrected to an en-dash.

Edit: ack, RTF export works OK except the HTML comment markers (if present) are exported too!. So, pick on or other export method butā€”at this timeā€”not both!

A few added lines can clean up the html output a little for the picky customer, who doesnā€™t need to know about the ugly little AppleScript that produced it:) The idea is to put the unwanted bits in the second text item delimiters list.

-- select table in note, command-c, and click 'Run'
set the clipboard to (the clipboard as Ā«class RTF Ā»)
set theHTML to do shell script "pbpaste -Prefer rtf | textutil -convert html -stdin -stdout"
set text item delimiters to {"<table", "/table>"}
set theHTML to "<table " & theHTML's text item 2 & "/table>"
set text item delimiters to {"  cellspacing=\"0\" cellpadding=\"0\" class=\"t1\"", " valign=\"middle\" class=\"td1\"", " valign=\"middle\" class=\"td2\"", "<p class=\"p1\">", "<p class=\"p2\">", "</p>"}
set theHTML to theHTML's text items
set text item delimiters to ""
set the clipboard to theHTML as text
--return the clipboard as text -- optional line to show in Result pane
1 Like

BoxPress happens to contain two macros for marking a section within a single note as a responsive HTML table. Best of all, they both let you create a table that is totally human-readable!

Which macro you use depends on how you want to create the human-readable table inside your Tinderbox note. If you want to make an old-school tab-delimited table, use TableHere. If you want to use the fancy Mac OS standard table, use Table.

The TableHere macro will create a responsive HTML table from an ordinary tab-separated table. It forgives initial newlines, so you can make the body very human-readable for yourself inside your note. It uses the following syntax:

^do( TableHere, caption, head, body )^

The docs and sample for TableHere are here: http://mapself.com/index/Pages/BoxPressLearningCenter/BoxPressReference/Macros/Macrosfortext/TableHere.html

The Table macro will convert a standard Mac OS table (using the ubiquitous Format > Text > Table ā€¦) into a responsive HTML table. It uses the following syntax:

^do( Table, caption, head, Mac OS table )^

This is even more human readable, since it is a standard Mac OS table that you are converting.

The docs and sample for Table are here: http://mapself.com/index/Pages/BoxPressLearningCenter/BoxPressReference/Macros/Macrosfortext/Table.html

Feel free to copy and paste the code from the above links into your own export system. Or download BoxPress to check out the CSS that makes the table responsive (i.e., good-looking on all screen widths).

To use the code yourself, youā€™ll need to add (1) a few new variables, and (2) a dummy note named bstVAR that holds their values (BoxPress uses a dedicated variable-holder note to prevent temporary values from being peppered about); but thatā€™s only if you want to use the code as is.

Doing so will not be necessary if you want to write your own macro inside your own export system. In that case just use the form and logic of the code as a model. The macro is interesting in that it makes an HTML table entirely out of export code, with no reliance on templatesā€”so you can embed your tables anywhere. Using the template method is tedious unless you have a hugely complex table where itā€™s worth the time filling-in key attributes; itā€™s much easier to just plop an actual table inside your text flow using a macro.

However, if you are interested in a template method, check out this link: http://mapself.com/index/Pages/BoxPressLearningCenter/BoxPressReference/Exportoptions/ExportoptionsblogExpOpt/Granularityoptions/TABLE.html

Here, your HTML table-to-be is comprised of (1) a container note and (2) its children. The $Name of the parent note is the table title, and its paragraphs are the table column headings. Each child note is a row, and each paragraph (of a child) is a cell. I found this scheme to be fairly intuitive, if you want to use a template method.

4 Likes