How to right-align images in HTML tables

Question

I have made a Django website and want to display my results like a little form at the top. There is a table on the left and I want to add two pictures and another column to the table on the right. I have designed a diagram to explain better - Enter image description here

Now I have written the code for Form 1 and the table. I also write backend code. I want to know how to write the html code for the image and form 2 since they are on the right side of the form. Just write any html code and it will appear below the table. Can anyone help adding a picture and form 2 to the right side of the table?

My current html code is-

*{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}

<!-- <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">Choose the server from - {{serverLst}}</label>
                <div class="form-group mx-5 my-3">
                    <select name="serverName" id="forserver" size="4" multiple>
                        {% for 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">
                <input type="date" class="form-control" id="floatingInputGrid" name="date">
                <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>Server Name</option>
                    {% for server in serverLst %}
                    <option value="{{server}}">{{server}}</option>
                    {% endfor %}
                </select>
                <label for="floatingSelectGrid">Select your 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>

<!-- tables  -->

<table class="table" style="width:25%">
    <thead>
        <tr>
            <th scope="col">User name</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 the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

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

任何改进我的html代码的建议都将非常有帮助，如果有任何html错误，请忽略。

Answer 1

Try using CSS properties, specifically position:absolute or position:fixed. 'https://sbgsdjango.herokuapp.com/English', this website is a demo for you, no

is required