HTML Table Cell: Space Between Image and Text

mlopp
mlopp Member
in Charting

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

Best Answer

  • ArborRose
    ArborRose Coach
    Answer ✓

    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>')
    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

Answers

  • ArborRose
    ArborRose Coach

    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;".

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach

    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>')

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • mlopp
    mlopp Member

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

  • ArborRose
    ArborRose Coach
    edited April 24

    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.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach
    edited April 24

    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 

    '&nbsp;'

    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.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • mlopp
    mlopp Member

    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
    ArborRose Coach
    Answer ✓

    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>')
    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach

    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.

    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • mlopp
    mlopp Member
    edited April 24

    That worked! Thank you!

Categories