HTML Table Cell: Space Between Image and Text

mlopp

I have a linked image of a video and the title of the video in one cell in my HTML table. How can I put space between my image and text in that single cell? I would like the text to just have a small space between it and the image. Here is my beast mode now:

CONCAT('<div><a href="', Front End URL,'", "target="_blank"><img src="',`thumbnail_url`,'" height="42px" style="vertical-align:middle"><span style="vertical-align:middle">', Title,' </a></span></div>')

Screenshot 2024-04-24 at 10.49.03 AM.png

ArborRose

This works…

CONCAT('<div><a href="', 'www.yahoo.com', '", "target="_blank"><img src="','yoururl/images/jate.jpg','" height="42px" style="vertical-align:middle"><span style="vertical-align:middle;padding:0px 0px 0px 20px;">', Title`,'</span></a></div>')

ArborRose

You can use "&nbsp;", which is a forced space in html. Html ignores consecutive spaces. Or you can add padding to the style , such as "padding-right:10px;".

ArborRose

By the way, make sure you use semi colons to separate things in style. After each "vertical-align:middle", you should follow with a semi colon.

CONCAT('<div><a href="', Front End URL,'", "target="_blank"><img src="',`thumbnail_url`,'" height="42px" style="vertical-align:middle;padding-right:10px;"><span style="vertical-align:middle">', Title,' </a></span></div>')

mlopp

@ArborRose I have tried the padding-right, but it doesn't work. Where does the &nbsp go?

ArborRose

In html "&nbsp;" means space. But a space that isn't ignored. So they can be strung together to make {space}{space}{space} by using &nbsp;&nbsp;&nbsp;. You put it anywhere you want a space character. Don't forget the semicolon.

Also, you should have the span nested inside the anchor in this order: <a href="path"><span>Title</span></a>

Based on your code, with &nbsp;, it would be something like this:

CONCAT('<div><a href="', Front End URL,'", "target="_blank"><img src="',`thumbnail_url`,'" height="42px" style="vertical-align:middle;"><span style="vertical-align:middle;">', [ Title],'</span></a></div>')

If the padding doesn't work on the right, try it on the left side of the title. But move your span tags to the proper placement.

CONCAT('<div><a href="', Front End URL,'", "target="_blank"><img src="',`thumbnail_url`,'" height="42px" style="vertical-align:middle;"><span style="vertical-align:middle;padding-left:10px;">', Title,'</span></a></div>')

EDIT: this is wrong. See next comment.

ArborRose

Sorry…the space doesn't show in the webpage.

CONCAT('<div><a href="', Front End URL,'", "target="_blank"><img src="',`thumbnail_url`,'" height="42px" style="vertical-align:middle;"><span style="vertical-align:middle;">', '&nbsp;', `Title`,'</span></a></div>')

Oh wait…your inside of a CONCAT. Add the space as

' '

Grrr…its not letting me type it correctly. Put it in a concat string with single quote on each side, and concat it before the title.

mlopp

Beast Mode doesn't like the syntax of the &nbsp; it throws an error.
Can't get the padding to do anything at all. Thank you for trying and for the help on the span order @ArborRose

ArborRose

This works…

CONCAT('<div><a href="', 'www.yahoo.com', '", "target="_blank"><img src="','yoururl/images/jate.jpg','" height="42px" style="vertical-align:middle"><span style="vertical-align:middle;padding:0px 0px 0px 20px;">', Title`,'</span></a></div>')

ArborRose

That doesn't seem to paste well. Here's a screenshot. It doesn't seem to recognize padding-right or padding-left. But it does recognize padding: 0px 0px 0px 0px; where each pixel number represents in order: top, right, bottom, and left.

mlopp

That worked! Thank you!