Simulating wiki transclusion inside HTML

useful info
1

On a wiki, they’ve got a server that can take code like {{Stats}} and retrieve the page with that name and insert it in the current document at the position where you put that template. The technical term is transclusion and it works like a subroutine in programming. Databases have the same retrieval capabilities.

I’m trying to do transclusion with just HTML.

What I’ve got is tables that need to display differing rows of data. For example, Table A might have Options 1, 2, 3 and 5. Table B might have Options 1, 3, 4 and 6.

Previously, I just built a single page for each Table and manually added all the Options into the table. But then I started finding cases where I didn’t add the Options correctly and wound up with something like Table A showing 5 items for Option 1 and Table B showing 4 for that same Option.

So to make sure I don’t miss any data, Option 1 gets split off into its own file and that’s transcluded into the pages for Tables A and B. Provides consistency. It winds up being one main table that draws the outer border and each row in it is another table that displays the info retrieved for Option 1, Option 2, etc.

An inline frame (IFRAME) seems to be doing the transclusion properly. The issue I’m running into is that I’m having to define every single aspect of the frame: width, height, top margin, left margin, and lock out the scroll bar if the frame isn’t tall enough. Some of these commands are tagged as not being supported in HTML 5.

If I don’t try to control it down to the exact pixel and rigidly define how all aspects of each cell is supposed to be, I wind up with weird things like a blank margin above the frame that’s 5 pixels tall and 150 pixels tall below it, or trying to set a background color for the first row and it gets applied to the entire table but if I move that command into the separate file, it works correctly.

The purpose of Hypertext MARKUP Language is that you don’t have to define it down to the last pixel. If you want to, lovely, but not force you to. And even though I’ve got everything lined up correctly on my monitor in four different web browsers, as soon as I resize it down to about what a laptop’s monitor would be (the resolution is something like 1024x600 or some other oddball value), the fixed-width columns start pushing the data down below the visible area of the frame because it’s a fixed height.

The tables I had before just specified the column widths as a percentage and it resized to whatever monitor you had. Should even work on a tablet. But if I try to use percentages inside the IFRAME, one frame may not line up exactly with the one below it. It’s like it says, “Well, this table is supposed to be 100% wide, the width of the first column isn’t specified and the second column is supposed to be 7% wide, but I think I’ll make that column 22% wide instead.”

Does anyone know of a better way of doing transclusion than this method that is so fussy and so easy to break? Keep in mind the following when making recommendations:

  1. I’d prefer not to have to work with Javascript. We have a few websites at work we have to use that are JS version-specific and I don’t want to do anything that might interfere with them
  2. If it’s a style sheet, I haven’t needed to work with them before but I can learn.
  3. It needs to be self-contained so that it can be run off of a USB stick, so that rules out any kind of database.
  4. Some of the links in the web pages will open up folders containing files you copy to other locations for different procedures, and some of these file types aren’t supported by wiki software, so that rules out TiddlyWiki.

I’ll stick with the hand-coded individual web pages if I need to and just be a little more careful about where I copy and paste from, but I’d really like to find some kind of transclusion method so that there’s one file to be updated when something changes instead of several.

2

I use PHP to include other files in an HTML page. I don’t think you want to do that.

As far as deprecated tags, CSS covers them, it’s just that defining a different style for every column or row is a pain in the ass. You could try this inline:

<td style="width: 15%, background: black, height: 11pt, etc.">Data</td>

3

Didn’t work with the CSS. The percentage in there has the same effect as the older WIDTH=15% command. It’s behaving as if it’s looking at how much data has to go inside the particular cell and using that to override the cell width parameter.

For example, if one contains the word hello, the second has just a small picture of a check mark in it, and the third cell is the one with the width not specified to take up the rest, the second cell is narrower than the first, even if both have the same percentage for the width.

The older and simpler table commands are more forgiving. If you set the width too narrow and it can’t do a word wrap on the contents of that cell, it would just change the width to match the content. Iframe cuts off whatever won’t fit in your rigid box.

4

Yes, because IFRAME can’t be defined dynamically. I thought you wanted to fit the data into the table, not the table into an IFRAME.

5

Let me see if I can explain this a little clearer. The simplest table you can have looks like this, with the second line a slightly different background color:

<table>
<tr>                
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
<tr bgcolor=#e2e2e20>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>

What I’m trying to do is move the code for the second row into a separate file so that the table looks like this (using wikimarkup):

<tr bgcolor=#e2e2e20>
{{ROW2}}
</tr>

The background color is added every other row to help make them not blur together. Just a hint of color that isn’t distracting but helps your eye travel left and right through the table. The pair of braces around ROW2 is what names a template in a separate page to be retrieved and inserted at that point.

If I set the widths in the top row of a regular table, all remaining rows usually play nice and I can use COLSPAN or ROWSPAN as I need to. So ideally, if I can transclude the data that makes up a row in a table, then that gives me the single point to update whenever data changes that I’m looking for, rather than trying to go to each HTML file that might have that particular row of data.

6

I’m not sure, but you might be able to do this in TiddlyWiki. Other than that, no clue…

Hmm. Unless you did it as a PHP script?

7

PHP requires a server. This needs is self-contained on a USB thumb drive. TiddlyWiki isn’t going to work because wiki software can’t cope with files like a .exe, nor can I get them to go to a page and display a Windows folder that can be dragged and dropped to the Desktop or another location.