HTML Table gets moved relative to other content

My page is Printers | Sam Hobbs’s Web Site. In that page (currently) there is </table> showing at the beginning of a paragraph then following that a sentence followed by text from a definition list followed by the table. The good news is that the table looks good. The problem is that in the markdown the sequence is:

  • An HTML table generated by Liquid
  • The sentence followed by a definition list

Somehow Jekyll is moving stuff around. The following is that markdown, beginning with the HTML table

<table>
<tr>
<th>Make & Model</th>
<th>Tech</th>
<th>InkModel</th>
<th>Yield</th>
<th>IC</th>
<th>List$</th>
<th>Oth$</th>
<th>TS</th>
<th>Vol.</th>
</tr>
{% for printer in site.data.Printers.printers.printer %}
<tr>
<td>{{printer.Make}} {{printer.Model}}</td><td>{{printer.Tech}}</td><td>{{printer.InkModel}}</td>
<td>{{printer.Yield}}</td><td>{{printer.InkCost}}</td><td>{{printer.ListPrice}}</td>
<td>{{printer.OtherPrice}}</td><td>{{printer.TouchScreen}}</td><td>{{printer.Volume}}</td>
</tr>
<tr><td>&nbsp;</td>
<td colspan=8>Width: {{printer.Dimensions.Width}};
Depth: {{printer.Dimensions.Depth}};
Height: {{printer.Dimensions.Height}}
{% if printer.Notes and printer.Notes != nil and printer.Notes != "" %}
<br>{{printer.Notes}}
</td></tr>
{% endif%}
{% endfor %}
</table>

The following provides explanations of some of the columns.

Tech
: Technology; most are either ink-cartridge or laser

Yield
: The number of pages a Black cartridge is expected to produce (high-yield cartridges
		when available)
		
IC
: The cost of a Black ink cartridge (high-yield cartridges when available)

List$
: The price as shown in the manufacturer&#39;s page for the printer, when available

Oth$
: The price shown somewhere else, such as Amazon

TS
: TouchScreen size; a TouchScreen is like the display in smartphones; we make selections by touching the screen

Vol.
: The number of pages the printer is expected to be able to print monthly without requiring additional maintenance

Why is the definition list not working and why is it getting moved to above the table (or the table being generated after the definition list)?

interesting, I looked at your source (GitHub - SamHobbsOrg/SamHobbsOrg.github.io: My personal website) and it probably should work, but I think it is failing due to the order things get done in?

you kind of have a lot that needs to happen on that page - it is a markdown page that has an html table that has liquid logic in it that is parsing a data file that is in json. That all has to be parsed a certain way to work and it looks like it is not. I am pretty sure the html within the liquid loop in a md file would work if it wasn’t a table. Not sure why it is thrown off by a table.

I replaced your table with a simple html table without the liquid loop and it worked fine. With the loop you end up with the extra closing table tag and the def list is not rendered.

Once you get it to work you’ll find you the definition list doesn’t have any styles - its just plain text. That theme must be removing the css needed to have a list that expands - assuming you want that.

While it is an interesting issue I still wonder why you went to all the work to make the data into json and then parse that into a table. Why not just copy the table and use it directly?

ah ha!

your if statement at the end of the table is incorrect:

<tr>
<td>&nbsp;</td>
<td colspan=8>Width: {{printer.Dimensions.Width}};
Depth: {{printer.Dimensions.Depth}};
Height: {{printer.Dimensions.Height}}
{% if printer.Notes and printer.Notes != nil and printer.Notes != "" %}
<br>{{printer.Notes}}
</td></tr>
{% endif%}
{% endfor %}
</table>

see how the closing td and closing tr are within the if? you can’t have that as if Notes does not exist you don’t get a properly closed row.

This was hard to spot, best clue was looking at View Page Source in chrome and you could see the table was all weird and the def list was part of the table and ended up being the first row from what I can tell.

That was fun. There must be something wrong with me.

2 Likes

thanks for the awesome information.

Thank you. I am sure you are correct. I am not sure I understand.

Obviously I want the notes to be optional. Oh, okay; now I see. I just need to make a separate row for the notes. I knew that. Okay I will do that now.

Yes when I make the HTML correct then Jekyll is able to be correct. Thank you.

I am using the Jekyll Minima theme. The original Jekyll theme. I chose it because it is simple. But no, I do not want the definition list to be that simple. I will try to style it so it looks more like a definition list should and if I need help with that I should create a new question.