How to align the output of the elements in JSP?

Question

I'm having some trouble aligning the output form the my JSP code it looks like this And i want it formatted in a nice way and i don't know how to do it

            <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
                pageEncoding="ISO-8859-1"%>
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Weather Manager</title>
            </head>
            <body>
                <div align="left">


                <form action=/Orange_assignment/Login>
                    Email : <input type="text" name="Email" align="left"> <br>
                    Password:&nbsp;<input type="text" name="Password" align="left"> <br>
                    <button type="submit" align="left">&nbsp;Login!</button>
                    Login using your credentials
                </form>

                <form action='Signup.jsp' method=POST>
                    <button type="submit">Signup!</button>
                    Not a user? Signup!
                    <pre>           <img src="OrangeTM.jpg" alt="Orange Logo"
                            style="width: 50px; height: 50px">
                    </pre>
                </form>
            </div>
            </body>
            </html>

If you have eclipse, select all by `Ctrl+A` and do `Ctrl+Shift+F`, it will format automatically. — Pradeep Simha, Oct 21 '14 at 16:50

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

Further to previous answer using tables for layout is considered bad practice (Why not use tables for layout in HTML?) but I suppose we've all done it (all us non-designers anyway). However with the advent of the Twitter Bootstrap library we can now all make great looking forms*:

http://getbootstrap.com/css/#forms-horizontal

Designers may not share this view.

edited May 23 '17 at 10:33

Community

1
1

answered Oct 21 '14 at 17:04

Alan Hay

22,665
4
56
110

score 0 · Answer 2 · answered Oct 21 '14 at 16:58

<table>
<tr>
   <td>Email :</td><td> <input type="text" name="Email" align="left"><td>
</tr>
<tr>
   <td>Password:</td><td><input type="text" name="Password" align="left"></td>
</tr>
   <td colspan="2"><button type="submit" align="left">Login!</button></td>
</tr>
</table>

score 0 · Answer 3 · answered Oct 21 '14 at 17:08

You can make use of the table tag and assign border 0. This will help you indent and format the way you want. Below is the code of yours:

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <td>Email</td>
    <td><input type="text" name="Email" align="left"></td>      
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="text" name="Password" align="left"></td>       
  </tr>
</table>
</body>
</html>

Modify it as per your requirements.

And below is the output of the code i gave you.

result

How to align the output of the elements in JSP?

3 Answers3