Widgets + Tables [Sugarcube/Twine 2]

Question

Is there any way to use widgets or the <<display>> macro in an HTML table without it breaking?

When you use table elements in a widget, and put that widget inside of a HTML table it doesn't format correctly.

Example;

<center><table>
<tr>
	<th style='width: 25%;'>Skill</th>
	<th style='width: 25%;'>Level</th>
	<th style='width: 25%;'>EXP</th>
	<th style='width: 25%;'>Next Level</th>
</tr>

<<showskills>>
</table></center>

Thats the table passage with just a <nobr> tag on it.

 

<<widget showskills>>
<tr>
	<td>Attack</td>
	<td>1</td>
	<td>0/20</td>
	<td>2</td>
</tr>
<</widget>>

There is the widget with <widget> & <nobr> tags.

Everything outputted by the widget ends up under the "Skill" header instead of their own respective ones.

Answer 1

When you use table elements in a widget, and put that widget inside of a HTML table it doesn't format correctly.

It would help if you gave a code example of what exactly you were trying to do, and so we can understand what you mean by "doesn't format correctly." but without such an example I would guess that you may be adding line-breaks to format your code and these could be causing the structure problems in your table.

Comments

Sorry about that. I updated the OP with an example.

---

Everything outputted by the widget ends up under the "Skill" header instead of their own respective ones.

It may appear this way but if you Inspect the HTML being create you will see that it is actually producing the following: (or at least in Chrome it is)

<table>
	<tr>
		<th style="width: 25%;">Skill</th>
		<th style="width: 25%;">Level</th>
		<th style="width: 25%;">EXP</th>
		<th style="width: 25%;">Next Level</th>
	</tr>
	<undefined>
		<undefined>Attack</undefined>
		<undefined>1</undefined>
		<undefined>0/20</undefined>
		<undefined>2</undefined>
	</undefined>
</table>

... and I believe this is because the output of the widget is being wikified (converted into HTML) before being appended to the temporary node that represents the Passage's HTML content, and the wikified it is being confused by the fact there is no parent table element (within the local context of the widget) for the generated tr element to be attached to and tr elements can't exist in isolation so therefor the tr element is invalid. But I could be wrong!

I am currently trying to come up with a simple method to dynamically create a table that doesn't result in the undefined elements.

---

The easiest way I've found so far is just to put everything inside of the widget in a list and then build the table later.

<<set _skills = []>>

<<showskills>>

<center><table>
<tr>
	<th style='width: 25%;'>Skill</th>
	<th style='width: 25%;'>Level</th>
	<th style='width: 25%;'>EXP</th>
	<th style='width: 25%;'>Next Level</th>
</tr>

_skills

</table></center>

<<widget showskills>>

<<set _skills += "<tr>
	<td>Attack</td>
	<td>1</td>
	<td>0/20</td>
	<td>2</td>
</tr>">>

<<set _skills += "<tr>
	<td>Fire</td>
	<td>3</td>
	<td>12/20</td>
	<td>4</td>
</tr>">>

<</widget>>