So richten Sie Bilder in HTML-Tabellen rechtsbündig aus

Question

Ich habe eine Django-Website erstellt und möchte meine Ergebnisse wie ein kleines Formular oben anzeigen. Links befindet sich eine Tabelle und ich möchte der Tabelle rechts zwei Bilder und eine weitere Spalte hinzufügen. Ich habe ein Diagramm entworfen, um es besser zu erklären - Geben Sie hier eine Bildbeschreibung ein

Jetzt habe ich den Code für Form 1 und die Tabelle geschrieben. Ich schreibe auch Backend-Code. Ich möchte wissen, wie man den HTML-Code für das Bild und Formular 2 schreibt, da sie sich auf der rechten Seite des Formulars befinden. Schreiben Sie einfach einen beliebigen HTML-Code und er wird unter der Tabelle angezeigt. Kann jemand helfen, ein Bild und Formular 2 auf der rechten Seite der Tabelle hinzuzufügen?

Mein aktueller HTML-Code ist-

*{% erweitert 'login/basic.html' %}
{% block title %}Genehmigung der Zählung{% endblock title %}
{% Blockkörper %}

<!-- <div class="container my-5 px-2">
<form action="/approval" method="post">{% csrf_token %}
    <!-- <div class="container"
            <div class="form-group mx-5 my-3">

                <div class="form-group mx-5 my-3">
                    <label class="my-3" for="date">Date</label>
                    <input type="date" id="date" name="date"
                </div>

                <label class="form-group mx-5 my-3" for="servers">Wählen Sie den Server aus – {{serverLst}}</label>
                <div class="form-group mx-5 my-3">
                    <select name="serverName" id="forserver"
                        {% für Server in serverLst %}
                        <option value="{{server}}">{{server}}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="submit" class="btn btn-primary mx-5 my-3">Submit</button>
            </div>

        </div> -->

    <div class="row g-2">
        <div class="col-md">
            <div class="form-floating">
                <Eingabetyp="Datum" class="form-control" id="floatingInputGrid" name="Datum">
                <label for="floatingInputGrid">Shift Date</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <select name="serverName" class="form-select" id="floatingSelectGrid">
                    <option selected>Servername</option>
                    {% für Server in serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% endfor %}
                </select>
                <label for="floatingSelectGrid">Wählen Sie Ihren Server</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <button type="submit" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">Submit</button>
            </div>
        </div>
    </div>
</form>

<!-- Tabellen -->

<table class="table" style="width:25%">
    <thead>
        <tr>
            <th Scope="col">Benutzername</th>
            <th Scope="col">Starting</th>
            <th Scope="col">Ending</th>
            <th Scope="col">Bonus</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th Scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th Scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th Scope="row">3</th>
            <td colspan="2">Larry der Vogel</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

<!-- </div> -->
{% endblock %}

Answer 1

尝试使用CSS属性，特别是position:absolute或position:fixed。'https://sbgsdjango.herokuapp.com/English'，这个网站是为您提供的演示，不需要