Images in tables and getting right up to the line

1

I am trying to recreate the Holes and Fits information traditionally much scanned and copied from the BS poster 4500a as I’m tired of having eyestrain from printed sources (I need glasses) or the blurfest that is most online copies. See here for the one of the better examples.

I thought I could be a little clever and have each of the boxes at the top as its own tiddler and then use the table lines as the divider. Then the diagram will always line up with the data regardless of screen size.

image
image518×272 20.4 KB

However, I find that the boxes sit slightly above the line for the row:

image
image333×156 5.72 KB

When really it needs to sit ON the line.

Does anyone have any Ideas or am I just going to have to go with one big svg at the top?

Here is the work in progress toddler if anyone wants to have a look.

2

Maybe this?

image
image929×649 45.3 KB

I’d probably wrap the table in a class then target .the-class table td img { ... in a stylesheet.

3

Like coda I find vertical-align:bottom to work but only if applied both to the image and the td

4

What browser Mat? Chrome and FF work with just the img for me. I did double check, because it was the TD I targeted first and figured I’d left that behind and forgot about it. Turns out, it works on just the img here in both browsers.

5

I tested in Brave :slight_smile:

6

I am not sure but is your answer CSS with 0 padding or 0 margins in the top and bottom?. If so you can introduce all the css styles you can imagine using html tags to build tables with lists driving the number of rows and columns. Sometimes even negative margins make sense.

7

I’ve only just had a chance to sit down and look at your help, and ummm…
To wrap the table in a class then target I do something in a $:\tags\Stylesheet tiddler???

Cheers :slight_smile:

8

I am not too well versed in CSS selectors yet, rather I would with create a class and assign it to a row or column or use the style="" on the HTML element.

9

ok…

<table width="200"valign="bottom">
<tr>
<td valign="Bottom">[img[https://tmc.stephenteacher.com/diagrams/c11.svg]]</td>
<td valign="Bottom ">Lorum</td>
</tr>
</table>

Move the text down but there is still a gap. Doesn’t seem to do much to the image. Will keep poking…

10

Put the following in a tiddler tagged with $:/tags/Stylesheet:

.mytable img { vertical-align:bottom; }

Then, use class="mytable" in your table HTML, like this:

<table width="200" class="mytable">

Note that you don’t actually need to use valign="bottom" in the <table> or <td> unless you want the text aligned to the bottom as well.

-e

12

Dear professor @Ste_W is the image itself kosher broheim? What I see isolating the SVG is this with excess upper hat space …

Screenshot 2021-11-10 163937
Screenshot 2021-11-10 163937380×424 17.6 KB

Just a probe.
TT

13

Just playing;

<table width="200" valign="bottom">
<tr>
<td style="padding: 0; margin: 0; vertical-align: bottom;">[img[https://tmc.stephenteacher.com/diagrams/c11.svg]]</td>
<td style="vertical-align: bottom;">Lorum</td>
</tr>
</table>
14

AFAIK, the valign attribute directly in the tag is deprecated and one should use css instead (i.e vertical-align: ...)

15

ty @EricShulman that has solved it.

@TW_Tones I’ll have a look at your suggestion as well! :slight_smile:

I’ll post the link to the table when done! :smiley:

Edit: I have no idea why I have an angry emoji on Erics Solution! Sorry. Have a happy one here :joy:

16

The excess upper space is deliberate to place the bottom image below the line.

17

Here it is so far!

image
image1164×526 55.4 KB

Now I just need to decide how to tiddlywiki the data…
Do I just chuck it in the table…
Do I do something dynamic tabley?
The possibilities!!!

Ste