Tak jsem zkusil.
Je nějaký programek na principu w3schools?
https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_default
V jednom okně vložim kod a v druhem okně uvidim vysledek?
Muj první pokus.
https://ibb.co/dGg0k7r
Pomuže někdo doupravit?
Text teploměr ložnice a obrazek teploměru vycentrovat a střed.
Mezi červeným teploměrem a textem teplota je moc velka mezera.
To same u vlhkosti.

<style>
    .main {
        height: 150px;
        width: 200px;
        background: lightblue;
    }
</style>
<div class="main">
    <table>
        <tr>
            <th>Teploměr</th> <th>ložnice</th>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/teploměr_50.png"></td>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/hot_24.png"></td>
            <td>Teplota</td>
            <td>{{msg.payload[0].temperature}}°C</td>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/humidity_24.png"></td>
            <td>Vlhkost</td>
            <td>{{msg.payload[1].humidity}}%</td>
        </tr>
    </table>
</div>