在HTML 3.2中,如何将文本与图像()在表格单元格()中对齐。

huangapple go评论37阅读模式
英文:

How to align text with image (<img>) in a table cell (<td>) in HTML 3.2

问题

很抱歉,Swing仅支持HTML 3.2。我尝试实现的目标是这样的:

但是我无法实现。无论我做什么,文本(sometext)和图像之间都没有对齐。

我尝试过所有组合:align=&#39;middle&#39; align=&#39;top&#39; align=&#39;bottom&#39;&lt;td&gt; 标签内和 &lt;img&gt; 标签内。我也尝试过使用 valign

以下是Java示例,以便您测试是否在Swing中有效:

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

我尝试了HTML 3.2参考规范中提到的很多方法,但都没有得到我想要的效果。

如果我这样做:

我接近了所需的效果。但是这在HTML 3.2中不起作用。

编辑:(在@Frakcool提到使用JTable之后)

我不使用JTable的原因是我使用文本作为工具提示,如此答案中所述。

英文:

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

在HTML 3.2中,如何将文本与图像(<img>)在表格单元格(<td>)中对齐。

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=&#39;middle&#39; align=&#39;top&#39; align=&#39;bottom&#39; inside &lt;td&gt; tag and inside &lt;img&gt; tag. I have tried with valign as well.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;html&gt;
   &lt;body&gt;
      &lt;table border=&quot;1&quot; &gt;
         &lt;tr&gt;
            &lt;td style=&#39;width:50%&#39;&gt;
               &lt;img src=&quot;https://www.w3schools.com/images/stickman.gif&quot;  align=&#39;middle&#39; width=&quot;24&quot; height=&quot;24&quot;&gt;
               sometext
            &lt;/td&gt;
            &lt;td  style=&quot;width:50%&quot;&gt;something&lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

What I get are things like:

在HTML 3.2中,如何将文本与图像(<img>)在表格单元格(<td>)中对齐。

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(() -&gt; {
			String prefix = &quot;&lt;html&gt;&lt;body&gt;&lt;table border=&#39;1&#39;&gt;&lt;tr&gt;&quot;;
			String suffix =  &quot;&lt;/tr&gt;&lt;/table&gt;&lt;body&gt;&lt;html&gt;&quot;;
			
			StringBuilder sb = new StringBuilder(prefix);
			sb.append(&quot;&lt;td style=&#39;width:50%&#39;&gt;&quot;);
			sb.append(&quot;&lt;img src=\&quot;https://www.w3schools.com/images/stickman.gif\&quot;  align=&#39;top&#39; width=\&quot;24\&quot; height=\&quot;24\&quot;&gt;&quot;);
			sb.append(&quot;sometext&quot;);
			sb.append(&quot;&lt;/td&gt;&quot;);
			sb.append(&quot;&lt;td style=&#39;width:50%&#39;&gt;&quot;);
			sb.append(&quot;something&quot;);
			sb.append(&quot;&lt;/td&gt;&quot;);
			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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;html&gt;
   &lt;body&gt;
      &lt;table border=&quot;1&quot; &gt;
         &lt;tr style=&#39;&#39;&gt;
            &lt;td style=&#39;width:50%;&#39;&gt;
               &lt;div&gt;
                  &lt;img style=&quot;vertical-align:middle&quot; src=&quot;https://www.w3schools.com/images/stickman.gif&quot; width=&quot;24&quot; height=&quot;24&quot;&gt;
                  &lt;span&gt;Works.&lt;/span&gt;
               &lt;/div&gt;
            &lt;/td&gt;
            &lt;td  style=&quot;width:50%&quot;&gt;
               &lt;div&gt;
                  &lt;span&gt;Works.&lt;/span&gt;
               &lt;/div&gt;
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

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.

答案1

得分: 3

HTML 3.2 中没有 style 属性。您唯一的希望是嵌套表格,像这样:

<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>
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  &lt;table border=&quot;1&quot; &gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;img src=&quot;https://www.w3schools.com/images/stickman.gif&quot;  align=&#39;middle&#39; width=&quot;24&quot; height=&quot;24&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;
              sometext
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;  
      &lt;/td&gt;
      &lt;td&gt;something&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年7月28日 03:00:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/63121827.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定