I have this quick&dirty table row that is built like this:

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

The ids are used, since the text is changed later by a short java script

As you can see, I have this right-aligned text and I want to display some icon on the left side of the table row. How can I achive this - best case without the use of a css file.

Thank you very much in advance

CodePudding user response：

If you want it at the left of the whole table I this this will work...:

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

CodePudding user response：

So I actually changed it now to be 2 coloums, which makes the separate alignment of the text and the images way easier in that case. It would be interesting to know, whether it is possible to have 2 differently aligned elements inside the same coloum nevertheless

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