如何将图像显示到html表的右侧

Question

我制作了一个Django网站，想要显示我的结果，就像在顶部有一个小form.Under，在左边有一个表，如果表在右边，我想添加到图像和另一个列中。我设计了一个更好的解释- 在这里输入图像描述

现在我已经为表格1和表格编写了代码。我也将编写后端代码，.I想知道如何为图像和表单2编写html，因为它们是正确的table.As，只要在表下编写任何html代码。任何人都可以帮助在表的右边添加图片和form2。

到目前为止我的html代码是-

*{% 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

尝试使用css属性，即位置:绝对或位置:固定。'https://sbgsdjango.herokuapp.com/English‘，这个网站对你来说是个演示，不需要