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

【问题标题】：How to align text with image (<img>) in a table cell (<td>) in HTML 3.2如何在 HTML 3.2 中的表格单元格 (<td>) 中将文本与图像 (<img>) 对齐
【发布时间】：2020-11-17 04:02:06
【问题描述】：

不幸的是，Swing 支持 HTML 3.2。 我想要实现的是：

但我也做不到。无论我做什么，文本 (sometext) 和图像之间都没有对齐。

我已经尝试了以下所有组合：align='middle' align='top' align='bottom' 在 <td> 标签和 <img> 标签内。我也试过valign。

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

我得到的是这样的：

有办法实现吗？

如果你想测试它是否在 Swing 中工作，Java 示例：

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);
        });
    }
}

我尝试了很多HTML 3.2 Reference Specification 中提到的东西，但没有一个能满足我的需求。

如果我这样做：

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

我接近它了。但这在 HTML 3.2 中不起作用

编辑：（在@Frakcool 强调使用JTable 之后）

我不使用JTable 的原因是我将文本用作工具提示。如this answer 中所述。

【问题讨论】：

你想让它们在中间垂直对齐吗？
@Frakcool 是的..
您不能使用JTable 或其他组件而不是尝试使用HTML 标记的任何具体原因？
@Frakcool 我已经编辑了我的问题。当我开始写我的问题时，我想提一下为什么我使用 HTML 而不是任何类型的组件，但后来我完全忘记了。

标签： java html css swing

【解决方案1】：

首先。 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>

【讨论】：

我从您的个人资料中看到，您的 HTML/css 经验比 Java 多（如果我错了，请原谅我）。 Java swing 的 HTML Kit 似乎尊重一些 css 属性。这就是为什么它们存在于我的代码中。我希望我能找到任何官方来源支持的内容，但我确信其中一些正在工作。其他一些则没有。让我对你的建议进行一些测试。我会告诉你的。
有点，是的。我有大量的 Java 经验，但几乎没有使用 Swing。