如何在HTML表格中实现图像右对齐
P粉555696738
2023-09-02 09:04:11
<p>我已经制作了一个Django网站，想要显示我的结果，就像在顶部有一个小表单。在左边有一个表格，我想在右边的表格中添加两个图片和另一列。我已经设计了一个图来更好地解释 -
在此输入图像描述</p>
<p>现在我已经编写了表单1和表格的代码。我也会编写后端代码。我想知道如何编写图片和表单2的html代码，因为它们在表格的右侧。只要写任何html代码，它就会出现在表格下面。有人可以帮助在表格的右侧添加图片和表单2吗？</p>
<p>我现在的html代码是-</p>
<pre class="brush:php;toolbar:false;">*{% 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 %}</pre>
<ul>
<li></li>
</ul>
<p>任何改进我的html代码的建议都将非常有帮助，如果有任何html错误，请忽略。</p>
尝试使用CSS属性，特别是position:absolute或position:fixed。'https://sbgsdjango.herokuapp.com/English'，这个网站是为您提供的演示，不需要