How can I format HTML Tables in Twine Sugarcube?

Question

Hello,

 

I have tried creating a simple HTML table to show of some stats for the player in one of my stories in PassageFooter and PassageHeader and it appears to be fine. However the cells are too big.

 

I tried to edit their size by removing borders or otherwise modifying the table but to no avail - Twine seems to be ignoring any specific table params like spacing, border etc. Am I doing something wrong? Or does Twine use some sort of different commands? I can't find any information anywhere.

 

Thank you!

 

V.

Answer 1

You need to state the name and full version number of the story format you are using as answers can be different for each one, and I suggest you do that via the question tag system instead of putting that information within the question's title. I an going to assume your using SugarCube v2.18.0

When asking a question related to why particular code doesn't work the way you want it to it helps if you supply an example of that code, otherwise the person(s) supplying an answer has to guess what that code looked like. I will assume your HTML table markup looks something like the following:

<table>\
<tr><th>Column 1</th><th>Column 2</th></tr>\
<tr><td>Value 1</td><td>Value 2</td></tr>\
</table>

note: I am using Line Continuations to remove unwanted (and invalid) br elements from the table markup.

You can style the above table markup using any of the standard CSS selectors and properties you would use on any standard HTML page.

A.Table border-collapse: collapse;: Both SugarCube 1.x and 2.x already include this in it's default CSS but you could in your Story Stylesheet as well if you wish. As a table can be used in places other than the main Passage area you will need to specifically target those tables.

.passage table {
	border-collapse: collapse;
}

B. Row/Cell padding: 0; Both series of SugarCube assign a small amount of padding to both table rows and cells, so you would need to use CSS like the following to remove it.

.passage th, .passage td, .passage tr {
	padding: 0;
}

If you want to target a single table then you could assign a ID property to that table and then use standard CSS selectors to target it. The following assumes you gave the table an ID of stats.

/% The table markup... %/
<table id="stats">\
<tr><th>Column 1</th><th>Column 2</th></tr>\
<tr><td>Value 1</td><td>Value 2</td></tr>\
</table>

/* The related CSS... */
#stats {
	border-collapse: collapse;
}
#stats th, #stats td, #stats tr {
	padding: 0;
}

... and you can do the same with a set of tables via a class property. The following assumes a class of info.

/% The table markup... %/
<table class="info">\
<tr><th>Column 1</th><th>Column 2</th></tr>\
<tr><td>Value 1</td><td>Value 2</td></tr>\
</table>

/* The related CSS... */
table.info {
	border-collapse: collapse;
}
table.info th, table.info td, table.info tr {
	padding: 0;
}

edit: added missing example to point B, could of sworn I cut-n-pasted it the first time through. 

Comments

Hello Greyelf,

 

first of all apology for not providing enough information - I assumed there wasn't that many differences between versions. My bad - I apologize. I also apologize for not providing code. As mentioned none of what I tried work so I was just looking for general guidance.

 

Thank you for a detailed answer - it is very well explained and extremely helpful. You pretty much answered all I wanted to know and fixed my problem :) I will try it out tonight and hope I am sure it will now be resolved.

 

Thank you again! :)

---

note: I am using Line Continuations to remove unwanted (and invalid) br elements from the table markup.

You don't actually need to do that.  In SugarCube, most non-void (container) type elements that exist solely to contain other elements—i.e. they should never directly contain text content themselves—have the line break parser disabled for their run.

As an FYI, the full list of such elements, at the present time, is: <colgroup>, <datalist>, <dl>, <figure>, <ol>, <optgroup>, <select>, <table>, <tbody>, <tfoot>, <thead>, <tr>, <ul>.