Comment aligner à droite les images dans les tableaux HTML

Question

J'ai créé un site Web Django et je souhaite afficher mes résultats sous la forme d'un petit formulaire en haut. Il y a un tableau à gauche et je souhaite ajouter deux images et une autre colonne au tableau de droite. J'ai conçu un diagramme pour mieux expliquer - Entrez la description de l'image ici

Maintenant, j'ai écrit le code du formulaire 1 et du tableau. J'écris également du code backend. Je veux savoir comment écrire le code html de l'image et du formulaire 2 puisqu'ils se trouvent sur le côté droit du formulaire. Écrivez simplement n’importe quel code HTML et il apparaîtra sous le tableau. Quelqu'un peut-il m'aider à ajouter une image et un formulaire 2 sur le côté droit du tableau ?

Mon code html actuel est-

*{% extends 'login/basic.html' %}
{% block title %}Approbation du décompte{% endblock title %}
{% corps de bloc %}

<!-- <div class="conteneur mon-5 px-2"-->
<form action="/approbation" méthode="post">{% csrf_token %}
    <!-- <div class="conteneur"
            <div class="form-group mx-5 my-3">

                <div class="form-group mx-5 my-3">
                    <classe d'étiquette="my-3" pour="date">Date</label>
                    <type d'entrée="date" id="date" nom="date">
                </div>

                <label class="form-group mx-5 my-3" for="servers"> Choisissez le serveur parmi - {{serverLst}}</label>
                <div class="form-group mx-5 my-3">
                    <select name="serverName" id="forserver" size="4" multiple>
                        {% pour le serveur dans serverLst %}
                        <option value="{{server}}">{{server}}</option>
                        {% fin pour %}
                    </sélectionner>
                </div>
                <type de bouton="soumettre" class="btn btn-primary mx-5 my-3">Soumettre</bouton>
            </div>

        </div> --->

    <div class="ligne g-2">
        <div class="col-md">
            <div class="form-floating">
                <type d'entrée="date" class = "form-control" id="floatingInputGrid" nom="date">
                <label for="floatingInputGrid">Shift Date</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <select name="nomduserveur" class = "form-select" id="floatingSelectGrid">
                    <option sélectionnée>Nom du serveur</option>
                    {% pour le serveur dans serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% fin pour %}
                </sélectionner>
                <label for="floatingSelectGrid">Sélectionnez votre serveur</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <type de bouton="soumettre" class = "btn btn-primary mx-5 my-2" id="floatingInputGrid">Soumettre</bouton>
            </div>
        </div>
    </div>
</formulaire>

<!-- tableaux -->

<classe de table="table" style="largeur:25%">
    <tête>
        <tr>
            <th scope="col">Nom d'utilisateur</th>
            <th scope="col">Démarrage</th>
            <th scope="col">Fin</th>
            <th scope="col">Bonus</th>
        ≪/tr>
    ≪/tête>
    <corps>
        <tr>
            <th scope="row">1</th>
            <td>Marque</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 l'oiseau</td>
            <td>@twitter</td>
        ≪/tr>
    </tcorps>
</tableau>

<!-- </div> --->
{% bloc de fin %}

Answer 1

Essayez d'utiliser les propriétés CSS, en particulier position:absolute ou position:fixed. 'https://sbgsdjango.herokuapp.com/English', ce site est une démo pour vous, pas besoin