HTML：更改表格行内的对齐方式？答案

【问题标题】：HTML: Changing the alignment inside a table row?HTML：更改表格行内的对齐方式？
【发布时间】：2022-01-07 13:18:06
【问题描述】：

我有一个这样构建的又快又脏的表格行：

<tr>
    <th colspan=2  align=right>
    <p style="display:inline; vertical-align:middle; align:left" id="waschmaschine"><img src="wm_2.png" height="28px"> </p> 
    <p style="display:inline" id="temp_innen">26.11</p>&deg;C&nbsp;|&nbsp;
    <p style="display:inline" id="humid_innen">24.17</p>&percnt;&nbsp;|&nbsp;
    <p style="display:inline" id="localtime">2022.01.06 15:35</p>&nbsp;
    </th>
</tr>

使用了 id，因为文本稍后会被一个简短的 java 脚本更改

如您所见，我有这个右对齐的文本，我想在表格行的左侧显示一些图标。我怎样才能做到这一点——最好的情况是不使用 css 文件。

非常感谢您

【问题讨论】：

你不是在解释问题是什么吗？您的代码的哪一部分没有按预期工作？
问题是浏览器似乎忽略了显示图像的 align=left 属性

标签： html css html-table alignment

【解决方案1】：

如果你想把它放在整个桌子的左边，我这会起作用...：

<img src="wm_2.png" height="28px" style="display:inline; vertical-align:middle; align:left" id="waschmaschine">
<tr>
    <th colspan=2  align=right>
    <td>&nbsp|&nbsp</td>
    <td style="display:inline" id="temp_innen">26.11&deg;C&nbsp;|&nbsp;</td>
    <td style="display:inline" id="humid_innen">24.17&percnt;&nbsp;|&nbsp;</td>
    <td style="display:inline" id="localtime">2022.01.06 15:35&nbsp;</td>
    </th>
</tr>

【讨论】：

第一个表格行的预期外观应该是 - 图标在左侧，如果我添加另一个图标，它将在第一个图标旁边 - 文本部分（时钟和临时工) 应该正确对齐。我考虑过创建两个列作为辅助选项，然后我可以在它们各自的中对齐项目 - 但理想情况下它是一个单独的，其中包含图标和文本分别对齐

【解决方案2】：

实际上，我现在将其更改为 2 列，这样在这种情况下可以更轻松地单独对齐文本和图像。有趣的是，是否有可能在同一列内有 2 个不同对齐的元素

<table>
 <tr>
    <th align=left>
        <p style="display:inline; vertical-align:bottom; padding:15px 5px; align:left" id="waschmaschine"><img src="wm_0.png" height="28px"> </p>
    </th>
    <th align=right>
    <p style="display:inline" id="temp_innen">26.64</p>&deg;C&nbsp;|&nbsp;
    <p style="display:inline" id="humid_innen">24.08</p>&percnt;&nbsp;|&nbsp;
    <p style="display:inline" id="localtime">2022.01.06 20:33</p>&nbsp;
 
    </div>
    </th>
    </tr>

【讨论】：