How to align text with image () in a table cell () in HTML 3.2

Question

Unfortunately, Swing supports HTML 3.2. What I am trying to achieve is this:

But I am unable too. No matter what I do there is no alignment between the text (sometext) and the image.

I have tried all combinations of: align='middle' align='top' align='bottom' inside <td> tag and inside <img> tag. I have tried with valign as well.

<html>
   <body>
      <table border="1" >
         <tr>
            <td style='width:50%'>
               <img src="https://www.w3schools.com/images/stickman.gif"  align='middle' width="24" height="24">
               sometext
            </td>
            <td  style="width:50%">something</td>
         </tr>
      </table>
   </body>
</html>

What I get are things like:

Is there a way to achieve it?

The Java example in case you want to test if it works in Swing:

public class HtmlExample {
    public static void main(String[] args) {
        //@formatter:off
        SwingUtilities.invokeLater(() -> {
            String prefix = "<html><body><table border='1'><tr>";
            String suffix =  "</tr></table><body><html>";
            
            StringBuilder sb = new StringBuilder(prefix);
            sb.append("<td style='width:50%'>");
            sb.append("<img src=\"https://www.w3schools.com/images/stickman.gif\"  align='top' width=\"24\" height=\"24\">");
            sb.append("sometext");
            sb.append("</td>");
            sb.append("<td style='width:50%'>");
            sb.append("something");
            sb.append("</td>");
            sb.append(suffix);
            
            JLabel label = new JLabel(sb.toString());
            JOptionPane.showMessageDialog(null, label);
        });
    }
}

I have tried a lot of things mentioned in HTML 3.2 Reference Specification but none of them give me what I want.

If I do this:

<html>
   <body>
      <table border="1" >
         <tr style=''>
            <td style='width:50%;'>
               <div>
                  <img style="vertical-align:middle" src="https://www.w3schools.com/images/stickman.gif" width="24" height="24">
                  <span>Works.</span>
               </div>
            </td>
            <td  style="width:50%">
               <div>
                  <span>Works.</span>
               </div>
            </td>
         </tr>
      </table>
   </body>
</html>

I come close to it. But this will not work in HTML 3.2

EDIT: (After @Frakcool made a point of using a JTable)

The reason I do not use a JTable is that I use the text for a tooltip. As mentioned in this answer.

Any specific reason you cannot use a `JTable` or other components instead of trying to do it with the HTML tags? — Frakcool, Jul 27 '20 at 19:40
@Frakcool I have edited my question. When I started writing my question, I was thinking to mention why I use HTML and not any kind of component but then I totally forget it. — George Z., Jul 27 '20 at 19:46

score 3 · Accepted Answer · answered Jul 27 '20 at 19:47

3

First. there's no style attribute in HTML 3.2. Your only hope is to nest tables, like this:

  <table border="1" >
    <tr>
      <td>
        <table>
          <tr>
            <td>
              <img src="https://www.w3schools.com/images/stickman.gif"  align='middle' width="24" height="24">
            </td>
            <td>
              sometext
            </td>
          </tr>
        </table>  
      </td>
      <td>something</td>
    </tr>
  </table>

answered Jul 27 '20 at 19:47

Alohci

78,296
16
112
156

As I see from your profile, you have more HTML/css experience than with Java (forgive me if I am wrong). Java swing's HTML Kit seem to respect some css-properties. That's why they exist in my code. I wish I could find which are being supported from any official source, but I am sure some of them are working. Some others don't. Let me have some tests with your suggestion. I will let you know. – George Z. Jul 27 '20 at 19:54
Kind of, yeah. I have a great deal of Java experience, but practically none of it is with Swing. – Alohci Jul 27 '20 at 20:02

How to align text with image () in a table cell () in HTML 3.2

1 Answers1