search

Home  >  Q&A  >  body text

How to right-align images in HTML tables

<p>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</p> <p>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? </p> <p>My current html code is-</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>
P粉555696738P粉555696738480 days ago639

reply all(1)I'll reply

  • P粉327903045

    P粉3279030452023-09-03 00:14:14

    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

    reply
    0
  • Cancelreply